React-Redux 1. 从基本使用入手

2024-02-19 11:28:38

引言

随着现代 Web 应用程序变得越来越复杂，管理应用程序状态变得至关重要。React，作为 JavaScript 中流行的前端库，仅处理 UI 渲染，并不能直接解决状态管理问题。这就是 Redux 发挥作用的地方。Redux 是一种状态管理模式，它提供了一种可预测、可调试且可扩展的方式来管理应用程序状态。

为什么引入 Redux？

引入 Redux 有几个关键原因：

集中式状态管理： Redux 提供一个单一的、全局可访问的状态存储库，确保应用程序状态的单一来源。
可预测性： Redux 采用单向数据流模式，所有状态更新都通过纯函数（称为 reducer）进行。这确保了应用程序状态的可预测性，从而简化了调试和推理。
调试能力： Redux DevTools 等工具提供高级调试功能，允许您回溯状态更改，识别错误并跟踪应用程序状态。
可扩展性： Redux 的模块化架构允许轻松添加和移除功能，使其适合各种应用程序规模。

基本用法

安装

要开始使用 React-Redux，需要安装以下依赖项：

npm install react-redux redux

创建 Redux Store

Redux 应用程序的中心是 store。它包含应用程序的完整状态，并管理状态的更新。要创建一个 store，可以使用以下代码：

import { createStore } from 'redux';

const store = createStore(reducer);

其中 reducer 是纯函数，负责处理状态更新。

连接 React 组件

为了使 React 组件能够访问 Redux store，需要使用 connect 函数。这将组件与 Redux 存储库连接起来，允许组件订阅状态更新并分发操作。

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ state, dispatch }) => {
  useEffect(() => {
    // 订阅状态更新
  }, []);

  const handleClick = () => {
    // 分发操作
    dispatch({ type: 'SOME_ACTION' });
  };

  return (
    <div>
      <p>{state.someState}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  state: state.someSlice,
});

const mapDispatchToProps = (dispatch) => ({
  dispatch,
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

操作和 Reducer

Redux 使用操作（actions）来应用程序中发生的事件。操作是纯对象，其中包含有关状态更改的详细信息。Reducer 是纯函数，负责处理操作并更新状态。

// 操作
const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: { text },
});

// Reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload.text];
    default:
      return state;
  }
};

结论

本指南介绍了 React-Redux 的基本用法。通过使用 Redux，您可以轻松管理大型 React 应用程序中的状态，从而提高可预测性、调试能力和可扩展性。如果您想深入了解 Redux，我强烈建议您阅读阮一峰老师关于 Redux 的出色文章，网址为：https://www.ruanyifeng.com/blog/2018/08/redux.html。