Redux - 集成 React

Redux - 使用 Hooks 集成到 React

虽然 Redux 是一个独立的库，但它最常与 React 等 UI 框架一起使用。react-redux 库提供了官方绑定，将 Redux 与 React Component 无缝集成，使得从 UI 轻松访问和更新 Redux Store State 成为可能。

将应用 State 存储在 Redux 中（React Component 之外），当多个 Component 需要访问相同数据时，或者当 State 需要在 Component 生命周期中持久化而无需复杂的 Prop Drilling（通过 Props 逐层传递数据）时，这是非常有益的。

现代 React Redux 集成主要使用两个关键元素：

<Provider>: 一个 Component，它包裹您的整个应用（或需要访问 Store 的部分），并通过 React 的 Context API 使 Redux Store 实例可用。
Hooks (useSelector, useDispatch): 在函数式 Component 中用于与 Redux Store 交互的函数。

Provider

<Provider> Component 接受 Redux Store 实例作为 Prop，并应在您的 Component 树的顶层渲染。

// src/index.js (or main.jsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store'; // Your configured Redux store
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Hooks: `useSelector` 和 `useDispatch`

与旧的 connect 高阶 Component 不同，函数式 Component 使用 Hooks 与 Store 交互：

useSelector: 允许您的 Component 从 Redux Store State 中提取数据。它接受一个 Selector 函数作为参数，该函数接收整个 Redux State 对象并返回所需数据的特定部分。React Redux 会自动将您的 Component 订阅到 Store，如果 Selector 返回的数据发生变化，Component 将会重新渲染。
useDispatch: 返回 Redux Store 的 dispatch 函数的引用。您使用它来 Dispatch Action。

使用 Hooks 的示例 Component：

// src/features/user/UserProfile.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { logoutUser } from './userSlice'; // Assuming an action creator

function UserProfile() {
  // Select user data from the store state
  const user = useSelector((state) => state.user.profile);
  const dispatch = useDispatch();

  if (!user) {
    return <div>Please log in.</div>;
  }

  const handleLogout = () => {
    dispatch(logoutUser());
  };

  return (
    <div>
      <h2>Welcome, {user.name}!</h2>
      <p>Email: {user.email}</p>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
}

export default UserProfile;

处理异步逻辑（例如，API 调用）

Redux 本身是同步的，但 API 调用等副作用很常见。Redux Toolkit 提供了 createAsyncThunk 来处理典型的异步请求生命周期（pending, fulfilled, rejected）。

createAsyncThunk 为这些状态生成 Action 类型，并根据您的 Payload Creator 函数返回的 Promise 自动 Dispatch 它们。您可以使用 extraReducers 字段在 Slice 中处理这些 Action。

// src/features/items/itemsSlice.js（续）

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios'; // 示例 HTTP 客户端

// 定义异步 thunk
export const fetchItems = createAsyncThunk(
  'items/fetchItems', // Action 类型前缀
  async () => { // Payload Creator 函数
    const response = await axios.get('http://api.example.com/items');
    return response.data; // 成功时这将成为 action.payload
  }
);

const initialState = {
  list: [],
  status: 'idle', // '闲置' | '加载中' | '成功' | '失败'
  error: null,
};

const itemsSlice = createSlice({
  name: 'items',
  initialState,
  reducers: {
    // ... 其他同步 Reducer
  },
  extraReducers(builder) {
    builder
      .addCase(fetchItems.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchItems.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload; // Replace list with fetched data
      })
      .addCase(fetchItems.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message; // 保存错误信息
      });
  }
});

export default itemsSlice.reducer;

// --- 在您的 Component 中 ---
// import React, { useEffect } from 'react';
// import { useDispatch, useSelector } from 'react-redux';
// import { fetchItems } from './itemsSlice';
//
// function ItemList() {
//   const dispatch = useDispatch();
//   const items = useSelector((state) => state.items.list);
//   const status = useSelector((state) => state.items.status);
//
//   useEffect(() => {
//     if (status === 'idle') {
//       dispatch(fetchItems());
//     }
//   }, [status, dispatch]);
//
//   // ... 根据状态和数据渲染项目
// }

对于更复杂的数据获取和缓存需求，可以考虑 RTK Query，这是一个内置于 Redux Toolkit 的高级数据获取和缓存解决方案，可以进一步自动化此过程。在这里找到它：RTK Query 概述。

现代 React-Redux 流程总结

Store: 集中式状态容器，使用 configureStore 配置（包括 DevTools, Thunk）。
Provider: 包裹应用，使 Store 可用。
Slice: 使用 createSlice 定义一部分 State、Reducer（配合 Immer）和 Action Creator。通过 createAsyncThunk 和 extraReducers 处理异步逻辑。
Component: 使用 useSelector 读取 State 并使用 useDispatch Dispatch Action（包括异步 thunk）。
交互: 用户操作触发 dispatch，Action 发送到 Store，运行相关的 Reducer，更新 State，并通过 useSelector 通知 Component 重新渲染。

React Redux，特别是结合 Redux Toolkit 和 Hooks，提供了一种强大且易于维护的方式来管理 React 应用中的 State。它鼓励明确的关注点分离，并默认提供性能优化。