Time: 2019-08-18

Provider組件與connect方法

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Provider組件使得應(yīng)用可在全局訪問store余爆。

connect方法

將組件與store聯(lián)系起來，不用setState觸發(fā)組件更新宝踪。

Action

action是把數(shù)據(jù)從應(yīng)用傳到store的有效載荷。是store數(shù)據(jù)的唯一來源赞季。

一般傳遞action的方式：

store.dispatch()

action用于描述發(fā)生了什么租谈，使用reducers來按照action更新state，store是聯(lián)系三者的對象商叹。

Store

職責(zé)：

• 維持應(yīng)用的 state；
• 提供 getState() 方法獲取 state只泼；
• 提供 dispatch(action) 方法更新 state剖笙；
• 通過 subscribe(listener) 注冊監(jiān)聽器;
• 通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器。

根據(jù)已有的reducer創(chuàng)建store请唱。

通過combineReducers()將多個reducer合并為一個總的弥咪，然后用createStore(rootReducer)創(chuàng)建store过蹂。

createStore可以接收第二個參數(shù)，用于設(shè)置state的初始狀態(tài)聚至。

需要區(qū)分store的state和組件的狀態(tài)酷勺。

Redux生命周期

• store.dispatch(action)

可以在任何地方調(diào)用 store.dispatch(action)，包括組件中扳躬、XHR 回調(diào)中脆诉、甚至定時器中。

• store調(diào)用傳入的reducer函數(shù)坦报，reducer函數(shù)接收兩個參數(shù)，當(dāng)前狀態(tài)和action狂鞋。

reducer是純函數(shù)片择。

• 根reducer會合并多個子reducer的輸出結(jié)果，形成單一的狀態(tài)樹骚揍，這個就是應(yīng)用的下一個state字管。
• store.subscribe(listener)，所有訂閱的監(jiān)聽器都會觸發(fā)信不，獲取當(dāng)前狀態(tài)：store.getState()

此時只是store的狀態(tài)嘲叔，為了更新UI，用store的狀態(tài)數(shù)據(jù)來更新組件狀態(tài)抽活。

如果你使用了 React Redux 這類的綁定庫硫戈，這時就應(yīng)該調(diào)用 component.setState(newState) 來更新。

容器組件

技術(shù)上講，容器組件就是使用 store.subscribe() 從 Redux state 樹中讀取部分?jǐn)?shù)據(jù)梭姓，并通過 props 來把這些數(shù)據(jù)提供給要渲染的組件霜幼。

可以手工來開發(fā)容器組件，但建議使用 React Redux 庫的 connect() 方法來生成誉尖。

容器組件關(guān)注的是將表現(xiàn)層連接到數(shù)據(jù)罪既。

表現(xiàn)層組件通過props獲取數(shù)據(jù)。

當(dāng)用戶想將某個表現(xiàn)組件和數(shù)據(jù)相連時铡恕，可以將組件包裹到容器中琢感。

Q: 容器中的數(shù)據(jù)如何獲取探熔？從store狀態(tài)映射到組件猩谊，store是全局，通過上下文獲取祭刚。

使用connect

使用 connect() 前牌捷，需要先定義 mapStateToProps 這個函數(shù)來指定如何把當(dāng)前 Redux store state 映射到展示組件的 props 中墙牌。

容器組件的職責(zé)：

• 讀取state
• 分發(fā)action

定義 mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示組件的 props 中的回調(diào)方法。

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

這里的mapStateToProps和mapDispatchToProps名稱可以自定義暗甥。

最后喜滨，使用 connect() 創(chuàng)建 VisibleTodoList，并傳入這兩個函數(shù)撤防。

import { connect } from 'react-redux'

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

export default VisibleTodoList

從以下幾個地方設(shè)定：

• 展示組件
• 容器組件
• reducers
• actions

初始狀態(tài)寫在reducers中虽风，reducers會接收初始狀態(tài)，并分發(fā)action寄月。

容器組件會為組件綁定數(shù)據(jù)和回調(diào)函數(shù)辜膝，回調(diào)函數(shù)可以在組件的任何地方通過props.xx調(diào)用。

為什么傳遞函數(shù)給組件

使用store時漾肮，我們假定組件的狀態(tài)全交給redux來管理了厂抖。那么，修改store會觸發(fā)UI的重新渲染克懊。所以容器組件需要將能夠修改store的函數(shù)傳遞到組件忱辅，讓組件在合適的情況下調(diào)用。

改變store的唯一方式是分發(fā)行為谭溉，所以mapDispatchToProps就是干這件事情：將分發(fā)行為的函數(shù)作為props傳遞給組件墙懂。

參考

http://cn.redux.js.org/

http://cn.redux.js.org/docs/basics/UsageWithReact.html

reduxPPT，非常好