Redux Toolkit调用reducer后组件更新但state不更新问题求助

问题原因与修复方案 #

1. dispatch后立即打印list无更新是正常现象 #

你通过useSelector拿到的list是当前渲染周期闭包内的状态快照，dispatch触发Redux store更新后，需要等待当前同步代码执行完成、组件触发重渲染，下一次渲染周期执行useSelector时才会拿到最新的状态值，因此你在dispatch后同步打印的永远是本次渲染的旧值，只要UI能正常更新就说明store的更新逻辑已经生效，不属于bug。

2. 你的代码中存在多个可导致功能异常的错误 #

（1）reducer更新逻辑错误

你所有修改类的reducer都存在返回值结构错误的问题：

• editToList、completeItemList中return [...state.list, state.list.map(xxx)]的写法会把map返回的整个新数组作为单个元素追加到原有数组末尾，导致list变成嵌套数组，完全不符合预期
• Redux Toolkit支持直接修改state草稿，不需要手动拼接返回新数组，推荐修改后写法如下：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  list: []
}

export const listSlice = createSlice({
  name: 'list',
  initialState,
  reducers: {
    addToList: (state, action) => {
      state.list.push({
        id: new Date().getTime().toString(), 
        title: action.payload.title, 
        complete: false
      })
    },
    editToList: (state, action) => {
      const targetItem = state.list.find(item => item.id === action.payload.id)
      if(targetItem) targetItem.title = action.payload.title
    },
    deleteListItem: (state, action) => {
      state.list = state.list.filter(item => item.id !== action.payload.id)
    },
    clearAllList: () => {
      return initialState
    },
    completeItemList: (state, action) => {
      const targetItem = state.list.find(item => item.id === action.payload.id)
      if(targetItem) targetItem.complete = !targetItem.complete
    }
  },
})

export const { completeItemList, editToList, addToList, deleteListItem, clearAllList} = listSlice.actions

export default listSlice.reducer

（2）删除操作dispatch传参错误

你现在的写法是dispatch(deleteListItem(), {id: id})，参数需要传入action creator的括号内，正确写法：

dispatch(deleteListItem({id: id}))

（3）编辑功能字段名不匹配

组件dispatcheditToList时传的字段是title，但你原reducer中读取的是action.payload['kegiatan']，字段名不匹配会导致编辑失效，上面的修复代码已经同步修正了这个问题。

内容的提问来源于stack exchange，提问作者Yustina Yasin