Redux 简介
Redux 是一个 JavaScript 应用程序状态管理工具。它与 React 紧密集成，但也可以与其他框架一起使用。Redux 具有单向数据流的概念，也就是说，数据只能从顶层组件通过 props 向下发送，而不能从下级组件向上级组件发送。Redux 的主要思想是，应用程序的状态应该被保存在一个单一的、不可变的对象中，并且这个对象应该与应用程序完全分离。Redux 可以深入控制应用程序的状态，从而使状态变得可预测和可维护。
Redux 包含三个基本组件：Store、Reducer 和 Action。
Store：应用程序状态保存在 Store 中。可以将 Store 想象成一个全局数据存储区域，可以在任何地方访问这个数据，但只能通过特定的方式来更改这个数据。
Reducer：Reducer 是一个纯函数，接收先前状态和描述如何更改状态的 Action，返回新状态。Reducer 只是用来描述应用程序如何响应不同类型的 Action。它不会修改应用程序状态，而是会创建一个新状态。
Action：Action 描述了一个行为（如添加一个新项目），并告诉 Redux 应该做什么。Action 是一个普通 JavaScript 对象，通常包含一个 type 属性来指定 Action 的类型。
Redux 在 Node.js/React 应用程序中的使用
我们可以在 Node.js/React 应用程序中使用 Redux 来改进状态管理。使用 Redux，我们将应用程序状态集中在一个 Store 中，使用 Reducer 来处理状态的变化，使用 Action 来描述这些变化。这种方式使得应用程序更容易拓展，更容易调试，更容易测试。
安装 Redux
在 Node.js 中，安装 Redux 只需要使用 npm 命令：
npm install --save redux
在 React 应用程序中，我们应该使用 react-redux 来简化 Redux 在 React 中的使用。
npm install --save react-redux
创建 Store
Store 存储应用程序的状态。我们可以通过将 Reducer 和初始化状态传递给 createStore() 函数来创建 Store。
import { createStore } from 'redux';
import rootReducer from './reducers';
// 初始状态
const initialState = {};
// 创建 Store
const store = createStore(rootReducer, initialState);创建 Reducer
Reducer 是用来处理应用程序状态改变的函数。它是一个纯函数，接收一个先前的状态和一个 Action，返回一个新状态。
-- -------------------- ---- -------
-- -- -------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--创建 Action
Action 描述了应用程序状态的改变。它是一个纯 JavaScript 对象，通常包含一个 type 属性来指定 Action 的类型。其他的属性可以根据需要设置。
// 示例 Action
const incrementAction = {
type: 'INCREMENT',
};连接 React 应用程序和 Redux
要连接 React 和 Redux，我们需要在 React 组件中使用 react-redux 中的 connect() 函数来创建一个新的组件。
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ----------- - ------- -- -
------ -------------------------
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
------ ------- --------------------------------------在 mapStateToProps() 中，我们将 Store 中的状态映射到 props 中，从而让组件可以访问这个状态。我们还可以使用 mapDispatchToProps() 函数将 Action 映射到 props 中，从而允许组件触发这些 Action。
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
};
};结论
通过使用 Redux，我们可以改进我们的应用程序状态管理。它提供了单向数据流的概念，使得应用程序更容易拓展，更容易调试，更容易测试。Redux 的主要思想是，应用程序的状态应该保存在一个单一的、不可变的对象中，并且这个对象应该与应用程序完全分离。要使用 Redux，我们首先需要创建 Store、Reducer 和 Action。然后，我们可以将这些组件连接到我们的 React 应用程序中，从而改进我们的应用程序状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67496f1da1ce0063545f137c