react-redux 入門

Created: November-22, 2018

React Redux 是一個為 Redux 提供 React 繫結的庫。

瞭解 Redux 儲存的 React 元件稱為容器，智慧元件或高階元件（HOC）。要使用 Redux，這些元件需要：

訂閱商店以獲取 Redux 商店的更新
派遣行動

手動執行此操作意味著在 React 容器中使用 store.subscribe 和 store.dispatch(action)。

React Redux 通過 connect 函式簡化了 Redux 儲存和 React 容器元件之間的繫結，該函式將 Redux 狀態屬性和 Action 建立者對映到元件的 props。

connect 是一個建立更高階元件的函式。Connect 接受 3 個函式（mapStateToProps，mapDispatchToProps，mergeProps）並返回一個容器元件，它包裝原始元件以使其成為連線元件：

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

有關完整示例，請參閱示例部分。

由於所有容器元件都需要訪問 Redux 儲存，因此推薦的方法是使用 React Redux 的特殊 <Provider> 元件，它將儲存傳遞給所有子元件（在內部使用 React 上下文）。

官方文件： http ： //redux.js.org/docs/basics/UsageWithReact.html

GitHub 回購： https ： //github.com/reactjs/react-redux