React-Redux学习

Redux流程图

React和Redux分工

React-Redux将所有组件分为了UI组件和容器组件。

UI组件不带任何逻辑，只负责渲染，所有的数据都通过this.props提供。（由React负责）

容器组件负责数据管理和业务逻辑处理。（由Redux负责）

Provider

react-redux提供了Provider组件，用于保存store给子组件中connect使用。

将它包裹在根组件的最外层，它会将store传递给容器组件。

Provider通过getChildContext方法将store保存到context里。

之后在connect会通过context读取store。

ReactDOM.render(
    <Provider store={store}>
        <ColorAppVisible/>
    </Provider>,
    document.getElementById("redux")
)

connect()

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])的作用是生成容器组件，容器组件将UI组件包装了起来，所有的数据都存放在容器组件上。

const ColorAppVisible =  connect(
    mapStateToProps,
    mapDispatchToProps
)(ColorApp);

mapStateToProps(state)

该方法的作用是:组件将监听store的任何变化，返回需要传递给子组件的state，返回的值将作为属性绑定在容器组件上。之后UI组件就可以通过this.props去读取数据了。

export const mapStateToProps = (state) => {  
    return { colors: state.headerReducer }  
}  

mapDispatchToProps(dispatch)

该方法的作用是：将逻辑处理事件传递给子组件，返回一个dispatchProps对象，该对象是action和dispatch的一个组合。返回的对象将被绑定在UI组件上，返回结果类似如下结构：

{
  addItem: (text) => dispatch(action)
}

实际项目中可能会遇到很多个action，我们手动一个一个的添加太麻烦了，Redux提供了bindActionCreators 方法，作用是将Actions和dispatch组合起来，返回一个dispatchProps对象。

不使用bindActionCreators 时：

export const mapDispatchToProps = dispatch => ({  
    addAction:(colorText) => ({
                            type:ACTION_ADD,
                            color:{
                                id:guid(),
                                color:colorText
                            }
                        }),
    updateAction:(color)=>({
                    type:ACTION_ADD,
                    color:color
    })

}) 

使用bindActionCreators 时：

export const headerAction = {
    addAction:(colorText) => ({
                            type:ACTION_ADD,
                            color:{
                                id:guid(),
                                color:colorText
                            }
                        }),
    updateAction:(color)=>({
                    type:ACTION_ADD,
                    color:color
    })
}

export const mapDispatchToProps = dispatch => ({  
    actions:bindActionCreators(headerAction,dispatch)
}) 

mergeProps()

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了这个参数，mapStateToProps()与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

options

[options] (Object)如果指定这个参数，可以定制 connector 的行为。

[pure = true] (Boolean): 如果为 true，connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果，避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。
[withRef = false] (Boolean): 如果为 true，connector 会保存一个对被包装组件实例的引用，该引用通过 getWrappedInstance() 方法获得。默认值为 false

React-Redux流程图