掌握 Redux 基础知识：React 状态管理完整指南-js教程-PHP中文网

Mastering Redux Basics: A Complete Guide to State Management in React

Redux 基础知识：带有代码示例的详细解释

Redux 是一个状态管理库，广泛用于 JavaScript 应用程序，尤其是 React。它为应用程序的状态提供了集中存储，使管理和调试变得更加容易，尤其是在大型复杂的应用程序中。 Redux 遵循单向数据流，并确保状态更改以可预测的方式发生，从而更容易理解您的应用程序的工作原理。

让我们一步步分解 Redux 基础知识，用代码示例解释每个概念。

1.什么是 Redux？

Redux 是 JavaScript 应用程序的可预测状态容器。它可以帮助您集中管理应用程序的状态，从而更轻松地调试和扩展。

Redux 核心原则：

单一事实来源：应用程序的整个状态存储在单个对象中（store），使其易于跟踪和操作。
状态是只读的：更改状态的唯一方法是调度操作。
使用纯函数进行更改：状态由reducers修改，它们是指定状态如何响应操作而变化的纯函数。

2. Redux 的核心概念

Redux 依赖于以下关键组件：

1.行动

action 是一个普通的 JavaScript 对象，它描述应用程序中发生的事件或操作。每个操作都必须有一个 type 属性，它描述正在执行的操作。

动作示例：

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

登录后复制

在这里，增量和减量是动作创建者。它们返回带有类型字段的操作对象。 type 属性告诉 Redux 如何处理减速器中的操作。

2.减速机

A reducer 是一个纯函数，它接受当前状态和一个操作，然后返回一个新状态。减速器是指定状态应如何改变以响应操作的函数。它们应该是纯函数，这意味着它们不会修改原始状态，而是返回一个新的状态对象。

减速器示例：

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

登录后复制

在上面的例子中：
- 初始状态定义为计数0。
- reducer 监听 INCREMENT 和 DECRMENT 操作并相应地更新计数状态。
- return { ...state, count: state.count 1 } 行创建一个新对象来保持不变性并更新状态。

3.商店

store 保存着应用程序的整个状态。存储是使用 Redux 中的 createStore 方法创建的，它是应用程序状态所在的位置。该商店还提供了调度操作和订阅状态更改的方法。

商店示例：

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

登录后复制

store是通过将counterReducer传递给createStore来创建的。
现在，应用程序的状态由 Redux 管理，状态的任何更改都将通过减速器。

3.连接 Redux 和 React

React 组件需要与 Redux 存储交互以获取状态和调度操作。 React-Redux 是一个独立的库，用于连接 React 和 Redux。它提供了诸如 useSelector 之类的钩子来访问存储的状态和 useDispatch 来调度操作。

将 Redux 与 React 连接的步骤：

使用 React-redux 中的 Provider 组件包装您的应用程序，将存储传递给您的所有组件。
使用 useSelector 访问状态。
使用 useDispatch 调度修改状态的操作。

4.在 React 应用程序中设置 Redux

让我们逐步完成将 Redux 与简单的 React 应用程序连接的完整设置。

第 1 步：安装 Redux 和 React-Redux

首先，你需要安装 Redux 和 React-Redux：

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

登录后复制

第 2 步：创建操作

在 Redux 中，操作是纯 JavaScript 对象，用于描述您想要对状态进行的更改。

npm install redux react-redux

登录后复制

递增和递减函数是返回动作对象的动作创建者。
操作对象有一个描述操作的类型字段。

第3步：创建一个Reducer

reducer 是一个接受当前状态和操作并返回新状态的函数。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

登录后复制

reducer 监听 INCREMENT 和 DECRMENT 操作并相应地更新状态。

第 4 步：创建商店

商店是国家居住的地方。它是使用 Redux 中的 createStore 方法创建的。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

登录后复制

我们将 counterReducer 传递给 createStore 以创建一个存储来管理我们应用程序的状态。

第 5 步：将 Redux 与 React 连接

现在，让我们使用 Provider、useDispatch 和 useSelector 挂钩将 Redux 连接到我们的 React 应用程序。

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

登录后复制

Provider：包装整个应用程序，将 Redux 存储传递给所有组件。
useSelector：从 Redux 存储中检索当前状态（计数）。
useDispatch：允许您调度操作（递增和递减）。

5. Redux 工具包（可选）

为了使 Redux 更易于使用，Redux Toolkit 通过减少样板代码来简化设置。它提供了 createSlice 和 configureStore 等实用程序来处理常见任务，例如创建减速器和配置存储。

使用 Redux 工具包的示例：

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

登录后复制