掌握 Redux 基础知识：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 连接的步骤：

1. 使用 React-redux 中的 Provider 组件包装您的应用程序，将存储传递给您的所有组件。
2. 使用 useSelector 访问状态。
3. 使用 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;

• createSlice 函数会自动为您生成动作创建器和缩减器。
• configureStore 简化了商店设置。

---

6.使用 Redux 的最佳实践

• 保留 Redux 的全局状态：使用 Redux 管理应用程序范围的状态（例如，用户身份验证、设置）。
• 对简单组件使用本地状态：对于较小的状态需求（例如表单输入），请使用 React 的 useState 而不是 Redux。
• 避免直接突变：更新状态时始终返回一个新对象以确保不变性。

---

7.结论

Redux 是一个用于管理 React 应用程序中全局状态的强大工具。通过了解操作、减速器和存储，您可以以可预测的方式管理复杂的状态。使用 Redux Toolkit 可以进一步简化这个过程。如果正确使用，Redux 可以使大型应用程序更易于管理、调试和扩展。

有了这些知识，您现在就可以将 Redux 合并到您的 React 应用程序中，确保整个应用程序更高效的状态管理。

---

以上是掌握 Redux 基础知识：React 状态管理完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！