React——redux的副作用处理中间件

一、redux-thunk

1、安装

npm install redux-thunk

2、使用

导入thunk以及使用thunk中间键

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'
import logger from 'redux-logger'
import { thunk } from 'redux-thunk'


export default configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(thunk, logger)
})

createSlice中使用thunk

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { getUserList } from '../api/userApi'

// First, create the thunk
export const fetchUserList = createAsyncThunk(
  'counter/getUserList',
  async () => {
    const response = await getUserList()
    const data = await response.json()
    return data
  }
)

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
    users: [],
    loading: 'idle'
  },
  reducers: {
    incremented: state => {
      state.value += 1;
    },
    decremented: state => {
      state.value -= 1;
    }
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserList.fulfilled, (state, action) => {
      // Add user to the state array
      state.users = [...action.payload]
    })
  },
});

// 导出actions
export const { incremented, decremented } = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer

组件中使用

import store from '../redux'
import { useState, useEffect } from 'react'
import { incremented, fetchUserList } from '../redux/counterSlice'
import { useNavigate } from 'react-router-dom'

export default function About() {
  const [counter, setCounter] = useState(store.getState().counter.value)
  const [users, setUsers] = useState([]);
  useEffect(() => {
    // 异步状态获取用户数据
    store.dispatch(fetchUserList())
    const unsubscribe = store.subscribe(() => {
      console.log("About中调用subscribe")
      setCounter(store.getState().counter.value)
      setUsers(store.getState().counter.users)
    })
  
    return () => {
      unsubscribe()
    }
  }, [])
  
  const navigate = useNavigate()
  const userList = users.map(it => (
    <li key={it.id}>姓名：{it.name},年龄：{it.age}</li>
  ))
  return (
    <>
      <div>This is About Page</div>
      <div>Counter: {counter}</div>
      <ul>
        {userList}
      </ul>
      <button onClick={() => {
        store.dispatch(incremented())
      }}>Counter + 1</button>
      <button onClick={() => {
        navigate("/login")
      }}>to Login</button>
    </>
  )
}

二、redux-saga