寫在開始
記得本示例中的過濾條件有三個 All 种柑、Undo 岗仑、Finish。
我們不止在一處使用了這些字符串聚请,他們與我們的程序聯(lián)系非常緊密荠雕,耦合度太高,并且可能發(fā)展為泛濫驶赏。
如果以后有需求炸卑,要對條件進行修改。我們需要一一找到煤傍,對其進行修改盖文。這無疑是一個繁瑣的過程,并且容易出錯蚯姆。
所以五续,我們需要把它定義在一處,在其他地方進行引用龄恋,這樣疙驾,如果修改需求不是特別大,我們只做一處修改篙挽,就能使全部生效荆萤。
這樣镊靴,我們將魔術字段消除了O晨ā!偏竟!
源碼:https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step3.2
消除魔術字段
1煮落、定義變量
我們需要定義個變量,它是一個對象形式踊谋,有三個key ALL
蝉仇、UNDO
、FINISH
,對應值為All
轿衔、Undo
沉迹、Finish
,還要將其導出
新建 ReactReduxDemo/app/config/enum.js
文件害驹,如下:
/**
* TODO 所有的過濾狀態(tài)
* @type {Object}
*/
export const FILITER_KEYS = {
ALL: 'All',
UNDO: 'Undo',
FINISH: 'Finish',
};
2鞭呕、修改初始數(shù)據(jù)
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';
// 這是初始數(shù)據(jù)
const initState = {
todos: [
{id:1,title:'吃早飯',status:true},
{id:2,title:'打籃球',status:false},
{id:3,title:'修電腦',status:false},
],
filter: FILITER_KEYS.ALL, // 修改初始數(shù)據(jù)宛官,使用變量的key
};
let store = createStore(reducers, initState);
export default class RootWrapper extends Component{
render(){
return (
<Provider store={store}>
<View style={styles.wrapper}>
<HomeContainer />
</View>
</Provider>
);
}
}
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 (
<Text style={[styles.filter,styles.filterCurrent]}>{filter}</Text>
);
}
return (
<TouchableOpacity onPress={()=>{this.filterTodo(filter)}}>
<Text style={styles.filter}>{filter}</Text>
</TouchableOpacity>
);
}
render(){
return (
<View style={styles.wrapper}>
{this.renderFilter(FILITER_KEYS.ALL)} // 使用變量的 key (注釋會報錯底洗,請刪除注釋)
{this.renderFilter(FILITER_KEYS.UNDO)} // 使用變量的 key (注釋會報錯腋么,請刪除注釋)
{this.renderFilter(FILITER_KEYS.FINISH)} // 使用變量的 key (注釋會報錯,請刪除注釋)
</View>
);
}
}
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 (
<View>
<TodoFormComponent addTodo={(text)=>{this.addTodo(text)}} />
<TodoListComponent todoList={this.props.todoList} toggleTodo={(id)=>{this.toggleTodo(id)}} />
<TodoFilterComponent filter={this.props.currentFilter} filterTodo={(filter)=>{this.filterTodo(filter)}} />
</View>
);
}
}
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 是我們想注入的 props
function mapStateToProps(state){
var list = getFilterTodos(state.todos, state.filter);
return {
todoList: list,
currentFilter: state.filter,
}
}
export default connect(mapStateToProps)(HomeContainer);
運行項目,看看是否正常運行徐块?是的未玻,它在展示與操作上沒什么區(qū)別。
我們對條件名稱進行簡單修改 All => AllTodo胡控、Undo => UnTodo扳剿、Finish => OverTodo
ReactReduxDemo/app/config/enum.js
文件,修改如下:
/**
* TODO 所有的過濾狀態(tài)
* @type {Object}
*/
export const FILITER_KEYS = {
ALL: 'AllTodo', // All => AllTodo
UNDO: 'UnTodo', // Undo => UnTodo
FINISH: 'OverTodo', // Finish => OverTodo
};
運行項目昼激,看看是否過濾條件已經(jīng)修改了呢庇绽,點擊試試,沒啥問題橙困。