Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助我们管理 React 应用程序中的复杂状态。对于大型的应用程序，Redux 可以帮助我们更好地组织代码并提高代码的可维护性。本文将介绍如何在 React 中使用 Redux。
安装 Redux
首先，我们需要安装 Redux。在命令行中输入以下命令：
npm install redux
创建 Redux store
Redux store 是应用程序的状态存储库。我们可以通过 Redux store 来管理应用程序的状态。在 React 中，我们可以使用 createStore 函数来创建 Redux store。以下是创建 Redux store 的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们首先定义了一个初始状态对象 initialState，它包含一个名为 count 的属性，初始值为 0。然后我们定义了一个 reducer 函数，它接受当前状态和一个 action 对象作为参数，并返回一个新的状态对象。在 reducer 函数中，我们根据 action 对象的类型来更新状态对象。最后，我们使用 createStore 函数来创建 Redux store。
使用 Redux store
我们可以使用 getState 函数来获取 Redux store 中的当前状态。以下是示例代码：
console.log(store.getState());
我们也可以使用 dispatch 函数来派发一个 action 对象，从而更新 Redux store 中的状态。以下是示例代码：
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState());在上面的代码中，我们首先使用 dispatch 函数来派发一个名为 INCREMENT 的 action 对象，从而更新 Redux store 中的状态。然后我们使用 getState 函数来获取更新后的状态。
将 Redux store 与 React 组件结合使用
在 React 中，我们可以使用 react-redux 库来将 Redux store 与 React 组件结合使用。以下是示例代码：
npm install react-redux
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------------------------
------- -----------------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们首先定义了一个名为 Counter 的 React 组件。它包含一个 h1 元素和两个按钮。我们使用 connect 函数将 Counter 组件与 Redux store 绑定。mapStateToProps 函数将 Redux store 中的状态映射为组件的属性。mapDispatchToProps 函数将组件的事件映射为派发 action 对象的函数。最后，我们使用 export default 语句导出连接后的 Counter 组件。
结论
在本文中，我们介绍了如何在 React 中使用 Redux。我们首先安装了 Redux，然后创建了 Redux store，并使用 getState 和 dispatch 函数来操作 Redux store。最后，我们使用 react-redux 库将 Redux store 与 React 组件结合使用。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6759ef987ebdbf91a6d871fc