在Reactjs中使用Redux

最开始使用Reactjs时没有觉得必须要用Redux，也就没有学这部分内容。最近遇到了一个多组件通信的问题，觉得到了使用Redux的时候了就在网上找了文档看了看。下面写一些初步的使用方法。
1. 首先要定义actions。也就是描述你自定义的组件带着什么数据与别的组件进行交互，改变别的组件的状态。例如在下面的代码中的action用于通知新增一个按键，消息名称为ADD_BUTTON，消息携带的数据有id和active。

let btnId = 0;export const addBtn = (active = false) => ({    type: 'ADD_A_BUTTON',    id: btnId++,    active})

1. 然后定义reducer。reducer用于定义组件的初始状态和收到消息后更新状态。下面代码中的reducer处理了ADD_BUTTON这个消息，并且向状态中添加了新的数据。注意btns这个名称，状态会以这个名称被传递到组件中，可以使用this.props.btns来访问。此外，状态中存储的内容主要看reducer。

import { combineReducers } from 'redux'const btns = (state = [], action) => {    switch(action.type) {        case 'ADD_A_BUTTON':            return [...state,                 {                    id: action.id,                    active: action.active                }]        default:            return state    }}const myReducer = combineReducers({btns})export default myReducer

1. 这时可以开始在组件入口处定义store。一个要注意的点是：Provider只能有一个子节点。我记得见过将Router作为字节点的。

import { createStore } from 'redux'import { Provider } from 'react-redux'const store = createStore(myReducer)const ReduxDemo = () => (    <div>        <BtnGroupContainer></BtnGroupContainer>        <AddBtnContainer></AddBtnContainer>        <RemoveBtnContainer></RemoveBtnContainer>        <DynamicViewContainer></DynamicViewContainer>    </div>)class Com3 extends React.Component{    render(){        return  (            <Provider store={store}>                <ReduxDemo></ReduxDemo>            </Provider>        )    }}

1. 然后开始定义组件。既可以使用函数式定义组件也可以将组件定义为对象。个人觉得定义为对象比较方便。下面组件的主要作用是用户点击按键，增加一个新的按键。所以它其实没有state，只需要向外发消息。mapState2Props其实没用。我试了下，如果不写mapState2Props，传null也可以。mapState2Props和mapDispatch2Props其实是将状态和组件向外发送action的函数封装成了props传递给了组件。所以组件的props有两个：state和addBtn。

const AddBtn = ({state, addBtn}) => {    return (        <button onClick={() => addBtn()}>Add a new Btn</button>    )}const mapDispatch2Props = {    addBtn: addBtn}const mapState2Props = (state) => {    return state}const AddBtnContainer = connect(mapState2Props, mapDispatch2Props)(AddBtn)export default AddBtnContainer

我把代码传到了github上https://github.com/Kenneth111/reactjs4study。除了redux，还有router和别的一些内容。有兴趣可以看看。