React Redux 完整用法

一、安装依赖

bash

运行

bash 复制代码

# 现代推荐：redux toolkit（简化redux）+ react-redux
npm install @reduxjs/toolkit react-redux

二、目录结构

plaintext

bash 复制代码

src/
├── store/
│   ├── index.js    # 仓库入口
│   └── slices/
│       └── userSlice.js  # 模块状态
├── App.js
└── main.js  # 根入口

三、1. 创建 Slice（拆分模块状态）

store/slices/userSlice.js

javascript 复制代码

import { createSlice } from '@reduxjs/toolkit'

// 初始状态
const initialState = {
  name: '',
  age: 18
}

const userSlice = createSlice({
  name: 'user', // 模块名
  initialState,
  reducers: {
    // 修改state方法（直接赋值，不用手动immutable）
    setName: (state, action) => {
      state.name = action.payload
    },
    setAge: (state, action) => {
      state.age = action.payload
    },
    addAge: (state) => {
      state.age += 1
    }
  }
})

// 导出action方法
export const { setName, setAge, addAge } = userSlice.actions
// 导出reducer给仓库
export default userSlice.reducer

四、2. 配置仓库 store/index.js

javascript 复制代码

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './slices/userSlice'

export const store = configureStore({
  reducer: {
    // 挂载模块：key=模块名，value=slice reducer
    user: userReducer
  }
})

五、3. 根组件注入 Provider（main.js）

让所有子组件能访问 redux

jsx

javascript 复制代码

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

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  {/* 包裹App，传入store */}
  <Provider store={store}>
    <App />
  </Provider>
)

六、4. 组件中使用（hooks API，函数组件）

useSelector：读取状态

useDispatch：派发 action 修改状态

App.js

jsx

javascript 复制代码

import { useSelector, useDispatch } from 'react-redux'
import { setName, setAge, addAge } from './store/slices/userSlice'

function App() {
  // 读取user模块下的状态
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()

  return (
    <div>
      <h3>姓名：{user.name}</h3>
      <h3>年龄：{user.age}</h3>

      {/* 修改数据 */}
      <button onClick={() => dispatch(setName('张三'))}>改名字</button>
      <button onClick={() => dispatch(setAge(22))}>改年龄</button>
      <button onClick={() => dispatch(addAge())}>年龄+1</button>
    </div>
  )
}

export default App

七、异步请求（Redux Toolkit createAsyncThunk）

1. slice 中写异步

userSlice.js

javascript 复制代码

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

// 异步请求函数
export const getUserInfo = createAsyncThunk(
  'user/getUserInfo',
  async (params, { rejectWithValue }) => {
    const res = await fetch('https://xxx/api/user')
    return res.json()
  }
)

const initialState = {
  info: null,
  loading: false
}

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  // 处理异步
  extraReducers: (builder) => {
    builder
      .addCase(getUserInfo.pending, (state) => {
        state.loading = true
      })
      .addCase(getUserInfo.fulfilled, (state, action) => {
        state.loading = false
        state.info = action.payload
      })
      .addCase(getUserInfo.rejected, (state) => {
        state.loading = false
      })
  }
})

export default userSlice.reducer

2. 组件调用异步

jsx

javascript 复制代码

import { getUserInfo } from './store/slices/userSlice'

function User() {
  const dispatch = useDispatch()
  const { info, loading } = useSelector(s => s.user)

  return (
    <>
      <button onClick={() => dispatch(getUserInfo())}>请求用户数据</button>
      {loading ? '加载中' : JSON.stringify(info)}
    </>
  )
}

八、Class 组件老式用法（过时了解即可）

jsx

scala 复制代码

import { connect } from 'react-redux'

class Demo extends React.Component {
  render() {
    return <div>{this.props.user.name}</div>
  }
}

// 映射state到props
const mapState = state => ({ user: state.user })
// 映射dispatch到props
const mapDispatch = { setName }

export default connect(mapState, mapDispatch)(Demo)

九、核心知识点总结

Redux Toolkit：官方推荐，内置 immutable、异步、中间件，简化冗余代码
createSlice：整合 state + reducers + actions，自动生成 action
Provider：全局提供 store，必须包裹根组件
useSelector：订阅读取 redux 数据，数据变化自动重渲染
useDispatch：触发 reducer 修改全局状态
createAsyncThunk：专门处理网络异步请求