react-redux的基本用法

看風景就發表於2018-08-20
ReactRedux

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>
)

 

相關文章