React 状态管理

状态管理是 React 应用开发中的一个重要话题，尤其是在构建较复杂的应用时。以下是关于状态管理的一些关键点，包括 Redux 和 React Query 的介绍。

4. 状态管理

4.1 Redux（可选）

Redux 是一个流行的状态管理库，用于管理 JavaScript 应用中的状态。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的“store”中，并通过“actions”和“reducers”来更新状态。

1. Redux 基础

   • Store：存储应用的状态。可以使用 createStore 函数创建一个 store。

     import { createStore } from 'redux';
     
     const store = createStore(reducer);
     

   • Action：描述发生的事件。通常是一个普通的 JavaScript 对象。

     const increment = () => ({
       type: 'INCREMENT'
     });
     

   • Reducer：处理 actions 并返回新的状态。Reducer 是一个纯函数，它接受当前的状态和 action，然后返回新的状态。

     const counter = (state = 0, action) => {
       switch (action.type) {
         case 'INCREMENT':
           return state + 1;
         default:
           return state;
       }
     };
     

   • Dispatch：用于发送 actions 来更新状态。

     store.dispatch(increment());
     

   • 连接 React 和 Redux

     使用 react-redux 库将 Redux store 与 React 组件连接起来：

     npm install react-redux
     

     import React from 'react';
     import { Provider, connect } from 'react-redux';
     import { createStore } from 'redux';
     
     const store = createStore(counter);
     
     function Counter({ count, increment }) {
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={increment}>Increment</button>
         </div>
       );
     }
     
     const mapStateToProps = (state) => ({
       count: state
     });
     
     const mapDispatchToProps = (dispatch) => ({
       increment: () => dispatch(increment())
     });
     
     const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
     
     function App() {
       return (
         <Provider store={store}>
           <ConnectedCounter />
         </Provider>
       );
     }
     
     export default App;
     

2. Redux Toolkit

   Redux Toolkit 是官方推荐的工具集，简化了 Redux 的使用，提供了更好的开发体验。

   • 创建 Slice

     import { createSlice, configureStore } from '@reduxjs/toolkit';
     
     const counterSlice = createSlice({
       name: 'counter',
       initialState: 0,
       reducers: {
         increment: (state) => state + 1
       }
     });
     
     const store = configureStore({
       reducer: counterSlice.reducer
     });
     
     export const { increment } = counterSlice.actions;
     export default store;
     

   • 连接 React 和 Redux Toolkit

     import React from 'react';
     import { Provider, useDispatch, useSelector } from 'react-redux';
     import store, { increment } from './store';
     
     function Counter() {
       const count = useSelector((state) => state);
       const dispatch = useDispatch();
     
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={() => dispatch(increment())}>Increment</button>
         </div>
       );
     }
     
     function App() {
       return (
         <Provider store={store}>
           <Counter />
         </Provider>
       );
     }
     
     export default App;
     

4.2 React Query（可选）

React Query 是一个用于数据获取、缓存和同步的库，它使得与服务器交互变得更加简单和高效。

1. 安装 React Query

   npm install react-query
   

2. 基本用法

   • 创建 Query Client

     import { QueryClient, QueryClientProvider } from 'react-query';
     
     const queryClient = new QueryClient();
     

   • 使用 useQuery

     import React from 'react';
     import { useQuery } from 'react-query';
     
     function fetchTodos() {
       return fetch('https://jsonplaceholder.typicode.com/todos')
         .then((res) => res.json());
     }
     
     function Todos() {
       const { data, error, isLoading } = useQuery('todos', fetchTodos);
     
       if (isLoading) return <div>Loading...</div>;
       if (error) return <div>An error occurred: {error.message}</div>;
     
       return (
         <ul>
           {data.map(todo => (
             <li key={todo.id}>{todo.title}</li>
           ))}
         </ul>
       );
     }
     
     function App() {
       return (
         <QueryClientProvider client={queryClient}>
           <Todos />
         </QueryClientProvider>
       );
     }
     
     export default App;
     

   • 使用 useMutation

     useMutation 用于处理创建、更新和删除数据的操作。

     import React from 'react';
     import { useMutation } from 'react-query';
     
     function createTodo(newTodo) {
       return fetch('https://jsonplaceholder.typicode.com/todos', {
         method: 'POST',
         body: JSON.stringify(newTodo),
         headers: {
           'Content-Type': 'application/json'
         }
       }).then((res) => res.json());
     }
     
     function AddTodo() {
       const mutation = useMutation(createTodo);
     
       const handleSubmit = (event) => {
         event.preventDefault();
         const newTodo = { title: event.target.elements.title.value };
         mutation.mutate(newTodo);
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <input name="title" placeholder="Todo title" />
           <button type="submit">Add Todo</button>
           {mutation.isLoading ? (
             'Adding...'
           ) : (
             mutation.isError ? (
               `Error: ${mutation.error.message}`
             ) : (
               mutation.isSuccess ? 'Todo added!' : null
             )
           )}
         </form>
       );
     }
     
     function App() {
       return (
         <QueryClientProvider client={queryClient}>
           <AddTodo />
         </QueryClientProvider>
       );
     }
     
     export default App;
     

这些状态管理技术将帮助你有效地管理 React 应用中的状态。Redux 和 React Query 各有其适用场景，Redux 适用于复杂的应用状态管理，而 React Query 主要用于数据获取和缓存。根据你的应用需求选择适合的工具。