介绍
breact-redux 是一个用于 React 和 Redux 结合使用的 npm 包。它提供了一种简单的方法将 React 组件连接到 Redux Store，以方便地访问和更新 Store 中的数据。
使用 breact-redux，你可以在不写任何样板代码的情况下实现你的 React 组件和 Redux Store 之间的连接。
安装
你可以使用 npm 安装 breact-redux：
npm install --save breact-redux
使用
Step 1: 创建 Redux Store
首先，你需要创建一个 Redux Store。以下是一个简单的示例，我们将一个字符串值存储在 Store 中。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------ - --- ------- -- -
------------------- -
---- ------------
------ -------------
--------
------ ------
-
-
----- ----- - ---------------------Step 2: 在 React 中使用
接下来，在你的 React 组件中，你可以使用 connect 函数将组件连接到 Store。在下面的示例中，我们将一个字符串值从 Store 中获取并显示在组件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
------ ------- ----- --- ----------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
------ -----
--
-
------ ------- --------------------------------------Step 3: 更新 Store
最后，你可以使用 dispatch 函数更新 Store 中的值。
store.dispatch({
type: 'SET_VALUE',
value: 'New Value'
});当你更新 Store 中的值时，所有连接到 Store 的组件都将自动重新渲染。
深入理解
mapDispatchToProps 函数
mapDispatchToProps 函数是一个可选的参数，它将 dispatch 函数映射到 React 组件的 props 中。这使得你可以在组件中调用 dispatch 函数，并发送异步操作。
以下是一个 mapDispatchToProps 函数的示例：
-- -------------------- ---- -------
----- ------------------ - ---------- -- -
------ -
-------- -- -- -
----------
----- ------------
------ ---------
---
-
--
-
------ ------- ------------------------ ---------------------------------在上面的示例中，我们将一个名为 onClick 的函数映射到了组件的 props 中。当用户点击组件时，我们将会触发 dispatch 函数并更新 Store 中的值。
使用 combineReducers
如果你的 Redux Store 包含多个值，你可以使用 combineReducers 函数将它们组合成一个单一的 reducer。
以下是一个 combineReducers 函数的示例：
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- -------- - -----------------
------- ---------
------- --------
---
----- ----- - ----------------------
----- --------------- - ------- -- -
------ -
------- -------------
------- ------------
--
-在上面的示例中，我们将两个 reducer 组合成了一个单一的 reducer。现在，我们可以通过在 mapStateToProps 函数中指定所需的值来获取 Store 中的值。
使用 Redux Middleware
如果你需要在 Redux Store 中处理异步操作，你可以使用 Redux Middleware。以下是一个 Redux Middleware 的示例：
const loggerMiddleware = (store) => (next) => (action) => {
console.log('Action:', action);
const result = next(action);
console.log('State:', store.getState())
return result;
}
const store = createStore(reducer, applyMiddleware(loggerMiddleware));在上面的示例中，我们创建了一个名为 loggerMiddleware 的 Redux Middleware。该 Middleware 用于记录 Store 中的操作和状态。
现在，你可以发出异步操作，比如发起一个网络请求，然后在异步完成时更新 Store 中的值。
结论
使用 breact-redux 使得在 React 和 Redux 之间建立连接变得更加容易。希望以上教程可以帮助你更好地理解 breact-redux 的使用方式，以及如何将它们应用到你的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f95