当前位置：首页 > React

react redux实现

2026-01-26 14:54:33React

Redux 核心概念

Redux 是一个状态管理库，适用于 React 及其他 JavaScript 应用。其核心概念包括：

Store：单一数据源，存储整个应用的状态。
Action：描述状态变化的普通对象，必须包含 type 字段。
Reducer：纯函数，接收当前状态和 Action，返回新状态。
Dispatch：触发 Action 的方法，通知 Redux 更新状态。

安装依赖

在 React 项目中集成 Redux 需要安装以下包：

npm install redux react-redux @reduxjs/toolkit

@reduxjs/toolkit 是官方推荐的简化 Redux 开发的工具包。

创建 Redux Store

使用 @reduxjs/toolkit 的 configureStore 创建 Store：

react redux实现

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

创建 Slice

Slice 是 Redux Toolkit 提供的简化 Reducer 和 Action 创建的 API：

// features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

连接 React 组件

通过 react-redux 提供的 Provider 和 Hooks 连接组件：

react redux实现

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

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

在组件中使用状态和 Action

使用 useSelector 和 useDispatch Hooks 访问状态和触发 Action：

// Counter.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default Counter;

异步操作处理

使用 createAsyncThunk 处理异步逻辑（如 API 调用）：

// features/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
  const response = await axios.get('/api/user');
  return response.data;
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle' },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      });
  },
});

export default userSlice.reducer;

中间件配置

Redux Toolkit 默认包含常用中间件（如 redux-thunk）。如需自定义，通过 configureStore 的 middleware 参数添加：

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware),
});