不用 Redux 也能全局状态管理？看我用 useReducer+Context 搞个 Todo 应用,redux和全局对象区别

本文介绍了如何使用React的useReducer和Context API来创建一个全局状态管理的Todo应用，而无需使用Redux，文章首先解释了Redux和全局对象在状态管理中的区别，然后详细描述了如何使用useReducer和Context来创建一个可重用的Todo上下文，以及如何在组件中使用该上下文来管理全局状态，这种方法提供了一种更简洁、更轻量的方式来管理全局状态，同时避免了Redux的复杂性和性能开销，通过示例代码，读者可以了解如何创建和管理Todo列表的添加、删除和编辑等功能。

不用 Redux 也能全局状态管理？看我用 useReducer + Context 搞个 Todo 应用

在前端开发中,管理全局状态是一个常见的需求，传统的解决方案是使用 Redux 这样的状态管理库，但如果你希望保持代码的简洁和性能，React 自带的 useReducer 钩子结合 Context API 可以提供一个非常有效的替代方案，本文将详细介绍如何使用这两个工具来构建一个简单的 Todo 应用，展示如何在不使用 Redux 的情况下实现全局状态管理。

背景介绍

在 React 中，组件的状态通常被封装在组件内部，但当应用变得复杂时，多个组件可能需要共享同一份状态，这时，Redux 这样的库就显得非常有用，它们提供了全局状态管理和高效的更新机制，对于小型应用或追求性能的应用来说，使用 Redux 可能会显得过于沉重，这时，我们可以考虑使用 useReducer 和 Context 来实现类似的功能。

useReducer 和 Context 简介

1. useReducer：这是一个 React 钩子，用于在函数组件中替代 useState 处理复杂的状态逻辑，它接受一个 reducer 函数和一个初始状态，返回当前状态和 dispatch 函数，用于更新状态。

2. Context：Context 是一种在组件树中传递数据的方式，避免了逐层传递 props 的繁琐，通过 Context，我们可以将全局状态（如本例中的 Todo 状态）传递给任何子组件。

实现步骤

创建 Context 和 Reducer

我们需要创建一个 Context 来存储和提供全局状态，以及一个 reducer 来处理状态的更新。

import React, { createContext, useReducer } from 'react';
// 创建 Context
export const TodoContext = createContext();
// 定义初始状态
const initialState = {
  todos: [],
  newTodo: '',
  error: null,
};
// 定义 reducer 函数
const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
        newTodo: '',
      };
    case 'SET_NEW_TODO':
      return { ...state, newTodo: action.payload };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((_, index) => index !== action.payload),
      };
    case 'SET_ERROR':
      return { ...state, error: action.payload };
    default:
      return state;
  }
};

创建 Provider 组件

我们创建一个 Provider 组件，它将使用 useReducer 钩子来管理状态，并通过 Context 提供给子组件。

import React, { useReducer } from 'react';
import { TodoContext } from './TodoContext'; // 假设文件名为 TodoContext.js 或 TodoContext.ts
import './App.css'; // 假设样式文件名为 App.css 或 App.ts (如果有)
const App = () => {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      <TodoApp /> {/* 子组件 */}
    </TodoContext.Provider>
  );
};

创建 TodoApp 组件并连接 Context

现在我们可以创建主应用组件 TodoApp 并使用 useContext 钩子来访问 Context 中的状态，我们将在这里展示如何使用这些状态来渲染 UI 和处理用户输入。

import React, { useContext } from 'react';
import { TodoContext } from './TodoContext'; // 假设文件名为 TodoContext.js 或 TodoContext.ts (如果有)
import './App.css'; // 假设样式文件名为 App.css 或 App.ts (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有) (如果有)