当前位置：首页 > React

react redux如何使用

2026-01-24 03:07:48React

安装依赖

确保项目已安装 React 和 Redux 相关库。通过以下命令安装核心依赖：

npm install redux react-redux @reduxjs/toolkit

创建 Store

使用 @reduxjs/toolkit 的 configureStore 创建 Redux store。创建一个文件（如 store.js）：

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

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

定义 Slice

通过 createSlice 定义 Redux 的 slice（包含 reducer 和 action）。例如 counterSlice.js：

react redux如何使用

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 组件

使用 Provider 将 store 注入 React 应用。在根组件（如 App.js）中：

import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <CounterComponent />
    </Provider>
  );
}

使用 Hooks 访问状态

在子组件中通过 useSelector 和 useDispatch 访问状态和触发 action。例如 CounterComponent.js：

react redux如何使用

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

function CounterComponent() {
  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>
  );
}

异步操作处理

使用 createAsyncThunk 处理异步逻辑。在 slice 中添加：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk('data/fetch', async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
});

// 在 slice 的 extraReducers 中处理异步状态
extraReducers: (builder) => {
  builder
    .addCase(fetchData.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchData.fulfilled, (state, action) => {
      state.data = action.payload;
      state.status = 'succeeded';
    });
}

类型安全（TypeScript）

为增强类型安全，可以定义类型化的 hooks：

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;