redux如何在react使用

安装 Redux 相关依赖

在 React 项目中使用 Redux 需要安装以下核心库：

• redux：Redux 核心库。
• react-redux：用于连接 Redux 和 React。
• @reduxjs/toolkit（推荐）：Redux 官方工具集，简化配置和开发流程。

通过 npm 或 yarn 安装：

npm install redux react-redux @reduxjs/toolkit

创建 Redux Store

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

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

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

export default store;

创建 Slice

Slice 是 Redux 中管理状态逻辑的模块。通过 createSlice 定义：

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

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 中连接 Store

通过 Provider 将 Store 注入 React 应用：

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

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

在组件中使用 Redux

使用 useSelector 和 useDispatch 钩子访问状态和触发动作：

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(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

异步操作处理

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

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

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

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

export default dataSlice.reducer;

开发工具集成

启用 Redux DevTools 扩展（默认已集成在 @reduxjs/toolkit 中）：

const store = configureStore({
  reducer: {
    // ...reducers
  },
  devTools: process.env.NODE_ENV !== 'production',
});