react-redux入門

概念

React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數據，並且向store分發actions以更新數據。

Provider

React-redux提供了Provider組件，能夠使整個app訪問到store中的數據。

一般在最頂層組件被渲染之前使用，例如：

// index.js
import TodoList from './TodoList';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/index';
// 使用Provider組件將原先的頂層組件包裹起來
const app = (
    <Provider store={store}>
        <TodoList/>
    </Provider>
)

ReactDOM.render(App, document.getElementById('root'));

向Provider組件提供一個store prop，即從哪個store向整個app提供數據。

connect

React-Redux提供一個connect方法能夠讓你把組件和store連接起來。

connect方法接受兩個參數：

• mapStateToProps
• mapDispatchToProps

mapStateToProps

作爲傳遞給connect方法的第一個參數，mapStateToProps用來從store中選擇被連接的組件所需要的部分數據。

該方法每當store state改變時就被調用。

mapStateToProps應該聲明爲一個函數，它接受兩個參數：state和ownProps。其中第一個參數是一個完整的==store state==。

該方法應最終返回一個組件所需要的數據對象。

作爲第一個傳遞給connect方法的參數，它會在每次Redux store state改變時被調用。如果你不希望訂閱store，那麼請傳遞null或者undefined替代mapStateToProps作爲connect的第一個參數。

參數

state

mapStateToProps的第一個參數是整個Redux store state對象（與store.getState()方法返回的值相同）。因此第一個參數通常命名爲state。

mapStateToProps方法至少要傳遞state參數。

ownProps

如果你的組件需要用自身的props數據以從store中檢索出數據，你可以傳入第二個參數，ownProps。這個參數將包含所有傳遞給由connect生成的包裝組件的props。

// Todo.js

function mapStateToProps(state, ownProps) {
  const { visibilityFilter } = state;
  const { id } = ownProps;
  const todo = getTodoById(state, id);

  // 組件額外接收:
  return { todo, visibilityFilter };
};

// 之後，在你的應用裏，渲染一個如下父組件：
<ConnectedTodo id={123} />
// 你的組件接收 props.id, props.todo, 以及 props.visibilityFilter

不需要把ownProps中的值再添加入mapStateToProps返回的對象中，connect會自動的把這些不同源的prop合併爲一個最終的prop集。

返回值

方法應該返回一個包含了組件用到的數據的純對象：

• 每一個對象中的字段都將作爲你組件的一個prop
• 字段中的值用來判斷你的組件是否需要重新渲染

注：在一些高級場景中，你可能需要更多地對於渲染性能的控制，mapStateToProps也可以返回一個方法。在這種情況下，那個所返回的方法會做爲一個特定組件實例的最終的mapStateToProps。這樣一來，你就可以對每個實例進行memoization。

mapDispatchToProps

作爲第二個傳入connect的參數，mapDispatchToProps可以實現向store中分發acions。

使用React-Redux後，組件就不再需要直接和store打交道了——connect會爲你完成這件任務，React-Redux提供了兩種可以分發actions的方式：

• 默認地，一個已連接組件可以接收props.dispatch然後自己分發actions
• connect能夠接收一個mapDispatchToProps作爲第二個參數，這將讓你能夠創建dispatch調用方法，然後把這些方法作爲props傳遞給你的組件。

如果不爲connect()指明第二個參數，你的組件會默認接收dispatch。比如：

connect()(MyComponent);
// 與下面語句等價
connect(
  null,
  null
)(MyComponent);

// 或者
connect(mapStateToProps /** 沒有第二個參數 */)(MyComponent);

一旦以這種方式連接了組件，組件就會接收props.dispatch。可以用它來向store中分發actions。

---

而提供一個mapDispatchToProps參數能夠讓你指明你的組件所實際需要分發的那些action
s。它允許你提供action分發函數作爲props，這樣一來，你不用再進行props.dispatch(() => increment())調用，你可以直接props.increment()