本文共 5121 字,大约阅读时间需要 17 分钟。
记得本示例中的过滤条件有三个 All 、Undo 、Finish。
我们不止在一处使用了这些字符串,他们与我们的程序联系非常紧密,耦合度太高,并且可能发展为泛滥。
如果以后有需求,要对条件进行修改。我们需要一一找到,对其进行修改。这无疑是一个繁琐的过程,并且容易出错。
所以,我们需要把它定义在一处,在其他地方进行引用,这样,如果修改需求不是特别大,我们只做一处修改,就能使全部生效。
这样,我们将魔术字段消除了!!!http://www.jianshu.com/p/dc835aa686f9
源码:
1、定义变量
我们需要定义个变量,它是一个对象形式,有三个key ALL
、UNDO
、FINISH
,对应值为All
、Undo
、Finish
,还要将其导出
新建 ReactReduxDemo/app/config/enum.js
文件,如下:
/** * TODO 所有的过滤状态 * @type {Object} */export const FILITER_KEYS = { ALL: 'All', UNDO: 'Undo', FINISH: 'Finish',};
2、修改初始数据
ReactReduxDemo/app/index.js
文件,修改如下:
import React, { Component } from 'react';import { View, StyleSheet,} from 'react-native';import { createStore } from 'redux';import { Provider } from 'react-redux';import { FILITER_KEYS } from './config/enum'; // 引用变量import reducers from './reducers/index';import HomeContainer from './containers/home.container';// 这是初始数据const initState = { todos: [ { id:1,title:'吃早饭',status:true}, { id:2,title:'打篮球',status:false}, { id:3,title:'修电脑',status:false}, ], filter: FILITER_KEYS.ALL, // 修改初始数据,使用变量的key};let store = createStore(reducers, initState);export default class RootWrapper extends Component{ render(){ return (); }}const styles = StyleSheet.create({ wrapper: { flex: 1, marginTop: 20, },});
3、修改子组件TodoFilterComponent
ReactReduxDemo/app/components/todo-filter.component.js
文件,修改如下:
import React, { Component } from 'react';import { View, Text, TouchableOpacity, StyleSheet,} from 'react-native';import { FILITER_KEYS } from '../config/enum'; // 引用变量export default class TodoFilterComponent extends Component{ constructor(props){ super(props); } filterTodo(filter){ this.props.filterTodo && this.props.filterTodo(filter); } renderFilter(filter){ if(filter==this.props.filter){ return ({filter} ); } return ({this.filterTodo(filter)}}> ); } render(){ return ({filter} {this.renderFilter(FILITER_KEYS.ALL)} // 使用变量的 key (注释会报错,请删除注释) {this.renderFilter(FILITER_KEYS.UNDO)} // 使用变量的 key (注释会报错,请删除注释) {this.renderFilter(FILITER_KEYS.FINISH)} // 使用变量的 key (注释会报错,请删除注释) ); }}const styles = StyleSheet.create({ wrapper: { flexDirection: 'row', paddingLeft: 20, paddingTop: 20, }, filter: { marginRight: 20, textDecorationLine: 'underline', }, filterCurrent:{ color: 'gray', textDecorationLine: 'none', },});
4、修改容器组件HomeContainer
import React, { Component } from 'react';import { View, Text} from 'react-native';import { connect } from 'react-redux';import { FILITER_KEYS } from '../config/enum'; // 引用变量import { changeTodoStatus, addNewTodo, filterTodoList } from '../actions/index';import TodoFormComponent from '../components/todo-form.component';import TodoListComponent from '../components/todo-list.component';import TodoFilterComponent from '../components/todo-filter.component';class HomeContainer extends Component{ constructor(props){ super(props); } addTodo(text){ let { dispatch } = this.props; dispatch(addNewTodo(text)); } toggleTodo(id){ let { dispatch } = this.props; dispatch(changeTodoStatus(id)); } filterTodo(filter){ let { dispatch } = this.props; dispatch(filterTodoList(filter)); } render(){ return (); }}const getFilterTodos = (todos, filter) => { switch (filter) { case FILITER_KEYS.ALL: // 使用变量 key return todos; case FILITER_KEYS.UNDO: // 使用变量 key return todos.filter( todo => !todo.status); case FILITER_KEYS.FINISH: // 使用变量 key return todos.filter( todo => todo.status); default: throw new Error('Unknown filter: ' + filter); }}// 基于全局 state ,哪些 state 是我们想注入的 propsfunction mapStateToProps(state){ var list = getFilterTodos(state.todos, state.filter); return { todoList: list, currentFilter: state.filter, }}export default connect(mapStateToProps)(HomeContainer); { this.addTodo(text)}} /> { this.toggleTodo(id)}} /> { this.filterTodo(filter)}} />
运行项目,看看是否正常运行?是的,它在展示与操作上没什么区别。
我们对条件名称进行简单修改 All => AllTodo、Undo => UnTodo、Finish => OverTodo
ReactReduxDemo/app/config/enum.js
文件,修改如下:
/** * TODO 所有的过滤状态 * @type {Object} */export const FILITER_KEYS = { ALL: 'AllTodo', // All => AllTodo UNDO: 'UnTodo', // Undo => UnTodo FINISH: 'OverTodo', // Finish => OverTodo};
运行项目,看看是否过滤条件已经修改了呢,点击试试,没啥问题。
转载地址:http://mgeni.baihongyu.com/