Redux Toolkit 基础使用

# npm 安装
npm install @reduxjs/toolkit react-redux

# yarn 安装
yarn add @reduxjs/toolkit react-redux

src
└── store/
    ├── modules/        # 所有业务模块的slice（核心）
    │   ├── userSlice.js # 用户模块：登录、个人信息等
    │   └── cartSlice.js # 购物车模块：添加、删除商品等
    └── index.js        # 创建全局store，合并所有slice

// 1. 导入RTK的核心方法
import { configureStore } from '@reduxjs/toolkit'
// 2. 导入各个业务模块的slice
import userReducer from './modules/userSlice'
import cartReducer from './modules/cartSlice'

// 3. 创建全局store并导出
const store = configureStore({
  // 合并所有slice的reducer，key自定义，value是slice的reducer
  reducer: {
    user: userReducer,
    cart: cartReducer
  }
})

// 导出store，供根组件使用
export default store

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 1. 导入Provider组件
import { Provider } from 'react-redux'
// 2. 导入全局store
import store from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  // 3. 用Provider包裹根组件，传入store属性
  <Provider store={store}>
    <App />
  </Provider>
)

// 1. 导入RTK核心方法
import { createSlice } from '@reduxjs/toolkit'

// 2. 定义初始状态：该模块的所有状态都在这里初始化
const initialState = {
  name: '张三',
  age: 20,
  isLogin: false, // 是否登录
  token: ''       // 登录令牌
}

// 3. 创建slice，核心配置3个参数
const userSlice = createSlice({
  // ① name：模块名称，必须唯一，用于区分不同slice
  name: 'user',
  // ② initialState：初始状态
  initialState,
  // ③ reducers：同步修改状态的方法集合（核心）
  // 这里的每一个函数，都是一个「同步action」，函数名就是action名称
  reducers: {
    // 修改用户名：直接修改状态，无需深拷贝！
    changeName(state, action) {
      state.name = action.payload // payload是传参，固定写法
    },
    // 用户登录：存入token，修改登录状态
    login(state, action) {
      state.token = action.payload.token
      state.isLogin = true
    },
    // 用户退出：重置状态
    logout(state) {
      state.token = ''
      state.isLogin = false
      state.name = '游客'
    }
  }
})

// 4. 必须导出：同步action方法（供组件调用，触发状态修改）
export const { changeName, login, logout } = userSlice.actions

// 5. 必须导出：当前slice的reducer（供store合并）
export default userSlice.reducer

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios' // 项目中请先安装：npm install axios

const initialState = {
  name: '张三',
  age: 20,
  isLogin: false,
  token: '',
  // 新增：异步请求的状态，用于页面loading/错误提示
  loading: false,
  error: ''
}

// ✅ 核心：创建异步action，处理接口请求
// createAsyncThunk(标识名, 异步回调函数)
// 回调函数的参数：组件调用时传入的参数；返回值：接口请求的结果
export const fetchLogin = createAsyncThunk(
  'user/fetchLogin', // 标识名：格式「模块名/方法名」，必须唯一
  async (loginForm, { rejectWithValue }) => {
    try {
      // 真实接口请求：用户名+密码登录
      const res = await axios.post('/api/login', loginForm)
      return res.data // 返回成功数据，会传给下方的extraReducers
    } catch (err) {
      // 请求失败：返回错误信息
      return rejectWithValue(err.response.data)
    }
  }
)

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    changeName(state, action) { state.name = action.payload },
    logout(state) { state.token = ''; state.isLogin = false }
  },
  // ✅ 核心：处理异步action的「三种状态」，必须写在extraReducers里
  // pending: 请求中  fulfilled: 请求成功  rejected: 请求失败
  extraReducers: (builder) => {
    builder
      // 登录请求中
      .addCase(fetchLogin.pending, (state) => {
        state.loading = true
        state.error = ''
      })
      // 登录请求成功
      .addCase(fetchLogin.fulfilled, (state, action) => {
        state.loading = false
        state.token = action.payload.token // 接口返回的token
        state.isLogin = true
        state.name = action.payload.username // 接口返回的用户名
      })
      // 登录请求失败
      .addCase(fetchLogin.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload.msg // 接口返回的错误信息
      })
  }
})

export const { changeName, logout } = userSlice.actions
export default userSlice.reducer

import { useSelector, useDispatch } from 'react-redux'
// 导入需要的同步/异步action
import { changeName, logout, fetchLogin } from './store/modules/userSlice'

function UserInfo() {
  // 1. 读取Redux状态：解构赋值，按需获取
  const { name, age, isLogin, loading, error } = useSelector(state => state.user)
  
  // 2. 获取dispatch方法
  const dispatch = useDispatch()

  // 同步修改状态：调用同步action
  const handleChangeName = () => {
    dispatch(changeName('李四')) // payload就是传入的参数
  }

  // 异步请求：调用异步action（登录请求）
  const handleLogin = async () => {
    const loginForm = { username: 'admin', password: '123456' }
    dispatch(fetchLogin(loginForm)) // 传参就是接口需要的参数
  }

  // 同步退出登录
  const handleLogout = () => {
    dispatch(logout())
  }

  return (
    <div>
      <h2>用户名：{name}</h2>
      <h2>年龄：{age}</h2>
      <h2>是否登录：{isLogin ? '已登录' : '未登录'}</h2>
      {error && <p style={{color: 'red'}}>{error}</p>}
      
      <button onClick={handleChangeName}>修改用户名</button>
      <button onClick={handleLogin} disabled={loading}>{loading ? '登录中...' : '登录'}</button>
      <button onClick={handleLogout} disabled={!isLogin}>退出登录</button>
    </div>
  )
}

export default UserInfo