一步一步学习 ReactNative + Redux（3.2:优化，消除魔术字段）

写在开始

记得本示例中的过滤条件有三个 All 、Undo 、Finish。
我们不止在一处使用了这些字符串，他们与我们的程序联系非常紧密，耦合度太高，并且可能发展为泛滥。
如果以后有需求，要对条件进行修改。我们需要一一找到，对其进行修改。这无疑是一个繁琐的过程，并且容易出错。
所以，我们需要把它定义在一处，在其他地方进行引用，这样，如果修改需求不是特别大，我们只做一处修改，就能使全部生效。
这样，我们将魔术字段消除了！！！http://www.jianshu.com/p/dc835aa686f9

源码：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 所有的过滤状态
 * @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 (
            <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);

运行项目，看看是否正常运行？是的，它在展示与操作上没什么区别。

Paste_Image.png

我们对条件名称进行简单修改 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
};

运行项目，看看是否过滤条件已经修改了呢，点击试试，没啥问题。

Paste_Image.png

Paste_Image.png