使用react-redux开发的简单步骤

一、安装相关包

　　

npm install redux react-redux --save

　　

二、根据具体情形创建模块文件

　　Store.js、Reducer.js、Actions.js

　　Store.js的作用在于引出store，方便在使用的时候引入。

　　Reducer.js的作用在于定义reducer，最好用combineReducers拆分reducer。

　　Actions.js用于定义ActionCreator，方便在dispatch action的时候根据不同变量生成不同action。

三、使用Provider组件以便于所有组件都能直接使用store

　　在使用根组件（通常是入口文件index.js）处引入Provider组件。

　　在index.js中引入store，

　　在ReactDOM.render()方法的第一个参数处使用Provider包裹根组件，

　　然后给Provider组件的store属性赋值为之前引入的store。

　　

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import store from './Store';
 
ReactDOM.render(<Provider store={store}>
    <App />
</Provider>, document.getElementById('root'));
registerServiceWorker();

　　

四、编写子组件

　　先写UI Component，即通常所写的普通组件；

　　然后定义Container Component，使用connect方法（从react-redux包中引入）即可将UI Component转化为Container Component。

　　注意要传递mapStateToProps、mapDispatchToProps两个参数。

最后导出组件以便于使用的时候引入。

　　

import React from 'react';
import { connect } from 'react-redux';
import { toggleItemAction, removeItemAction } from './Reducer';
 
class Display extends React.Component {
    componentWillMount(){
        this.toggleCompleted = this.props.toggleCompleted;
        this.removeItem = this.props.removeItem;
        console.log(this.props);
    }
    render(){
        return <div>
            <ul>
                {
                    this.props.items.map(item => {
                        let tmp = null;
                        if(item.completed){
                            tmp = <del>{item.value}</del>
                        }
                        else {
                            tmp = item.value;
                        }
                        if(tmp === null || tmp ===''){
                            return null;
                        }
                        return <li key={item.id}>
                            {tmp}
                            <button id={'toggle' + item.id} onClick={this.toggleCompleted}>Toggle</button>
                            <button id={'remove' + item.id} onClick={this.removeItem}>Remove</button>
                        </li>
                    })
                }
            </ul>
        </div>
    }
}
 
const mapStateToProps = (state) => {
    return {
        items: state.items
    };
};
 
const mapDispatchToProps = (dispatch) => {
    return {
        toggleCompleted(e){
            let id = e.target.id.substring(6);
            dispatch(toggleItemAction(id));
        },
        removeItem(e){
            let id = e.target.id.substring(6);
            dispatch(removeItemAction(id));
        }
    };
};
 
const DisplayContainer = connect(mapStateToProps, mapDispatchToProps)(Display);
 
export default DisplayContainer;

　　

五、注意点

　　1.mapStateToProps参数其实是一个函数，默认带有一个参数为state，作用是将state中的值映射到我们定义的组件的props属性中。

　　　一下定义一个mapStateToProps：

　　　　

const mapStateToProps = (state) => {
    return {
        items: state.items
    };
};

　　这样的话，在组件中就可以通过this.props.items获取到state.items。

　　mapStateToProps函数所返回的对象可以认为是组件props属性的一个子集。

　　2.mapDispatchToProps参数是一个对象或者函数，我习惯于写成一个函数，函数具有一个默认属性即为dispatch，相当于store.dispatch()，mapDispatchToProps函数会返回一          个对象。对象中的所有方法都会传递给组件的props属性。也可以认为它所返回的对象是组件props属性的一个子集。

const mapDispatchToProps = (dispatch) => {
    return {
        toggleCompleted(e){
            let id = e.target.id.substring(6);
            dispatch(toggleItemAction(id));
        },
        removeItem(e){
            let id = e.target.id.substring(6);
            dispatch(removeItemAction(id));
        }
    };
};

　　以上代码定义了一个mapDispatchToProps函数，这样，在组件内部可以通过this.props[propertyName]访问到toggleCompleted函数或者removeItem函数。

　　3.如何在mapDispatchToProps函数定义的一系列函数中获取组件内部数据？

　　解决方法有两种：

　　（1）通过event.target来获取事件发生节点，然后通过DOM属性获取组件内部的数据。注意点2中的代码即是例子。

　　（2）在组件内部定义事件处理函数，不直接利用this.props[propertyName]来处理组件事件。组件内部自定义事件处理函数可以通过this等获取到组件内部数据，然后在组件自定义事件处理函数内部调用this.props[propertyName]，传递参数即可。

　　4.是否需要使用react-redux

　　react-redux是redux的作者为了方便于在React中使用redux而开发出来的。

　　react-redux为我们在react项目中使用redux带来了便利，但也提升了学习成本，我们需要学习一些新的API，并且遵循react-redux的开发及组件拆分规范。

　　如果你因为单纯的在项目中使用redux需要不断地引入store，不断地写store.[propertyName]而感到厌烦，那么可以尝试使用react-redux。

　　如果你认为使用redux十分方便简洁明了，那么可能并不需要使用react-redux。