react-redux的基本用法

redux仅仅是一个状态管理的库,不能直接用于react,react-redux是redux作者封装的用于连接redux和react的库。

react-redux基本概念

1. UI组件

1. 只负责UI显示的组件,不包含业务逻辑

2. 没有状态

3. 所有数据都由(props)提供

4. 不使用任何Redux的API

2. 容器组件

1. 只负责管理数据和业务逻辑,不负责UI呈现

2. 有自己的状态

3. 使用Redux的API

3. 生成容器组件

react-redux提供了一些方法,来从UI组件生成容器组件,完整结构如下:

const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

其中的

connect 是连接组件

mapStateToProps 是将状态映射为UI组件的props

mapDispatchToProps 是将dispatch(action)映射为一个具名方法,传入props,供UI组件调用

4. 容器组件如何接收全局的State

react-redux提供了<Provider>组件来解决任意层级的容器组件接收State的问题。<Provider>的本质

是使用了React的context属性,来将全局的State传递到任意层级的子组件。<Provider>的具体用法如下:

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)    

<Provider>配合React-Router的用法

const Root = ({ store }) => (
    <Provider store={store}>
        <Router>
            <Route path="/" component={App} />
        </Router>
    </Provider>
)