React Redux 完整用法小结

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

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

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

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

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

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>
)

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

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

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)}
    </>
  )
}

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)