在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和别的一些内容。有兴趣可以看看。