Redux Action 已调度，但状态未相应更新答案

【问题标题】：Redux Action is Dispatched but state not updating accordinglyRedux Action 已调度，但状态未相应更新
【发布时间】：2022-06-21 15:32:02
【问题描述】：

当我单击删除按钮时，将调度操作（removeBus）并发送正确的有效负载值，但存储未更新这是我的 busSlice 文件

import { createSlice } from "@reduxjs/toolkit";
const initialState = [
  {
    id: "0",
    description: "bus1"
  },
  {
    id: "1",
    description: "bus2"
  }
];
const busSlice = createSlice({
  name: "bus",
  initialState,
  reducers: {
    removeBus: (state, action) => {
      state.filter((bus) => bus.id !== action.payload);
      console.log(action.payload);
    }
  }
});
export const { removeBus } = busSlice.actions;
export default busSlice.reducer;

这里是我创建和导出商店的地方

import { configureStore } from "@reduxjs/toolkit";
import busReducer from "../features/busSlice";
export const store = configureStore({
  reducer: {
    busses: busReducer
  }
});

使用状态的组件在以下代码中创建，App 被包装在 redux 提供者组件中，上面的 store 作为 index.js 中的 props 提供

import "./styles.css";
import { useSelector, useDispatch } from "react-redux";
import { removeBus } from "./features/busSlice";
export default function App() {
  const dispatch = useDispatch();
  const busses = useSelector((state) => state.busses);
  const handleRemove = (id) => {
    dispatch(removeBus(id));
  };

  return (
    <div className="App">
      {busses.map((bus) => (
        <ul>
          <li key={bus.id}>
            <p>{bus.description}</p>
            <button onClick={() => handleRemove(bus.id)}>delete</button>
          </li>
        </ul>
      ))}
    </div>
  );
}

使用 redux 开发工具，我可以看到一个动作 busses\removeBus 被调度了适当的有效负载值，但状态没有发生任何事情。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

你可以改变：

removeBus: (state, action) => {
      state.filter((bus) => bus.id != action.payload);
      console.log(action.payload);
    }

可以是bus.id和action.payload的数据类型不同。

【讨论】：

bus.id 和 action.payload 都是字符串，正确的有效载荷值会显示在控制台中

【解决方案2】：

您没有正确更新状态，您需要说将我的状态更改为过滤状态

喜欢这个

removeBus(state, action){
      state = state.filter((bus) => bus.id !== action.payload);
      console.log(action.payload);
}

【讨论】：

那也不行
哦...好吧，但无论如何它是一个错误....
我认为问题可能在您的过滤逻辑中

【解决方案3】：

我也有这个问题。

我的情况，代码如下所示：

const someSlice = createSlice({
  name: 'test',
  initialState: null, 
  reducers: {
  addData(state, action) {
     state = action.payload
   }
 } 
});

这没用

const someSlice = createSlice({
  name: 'test',
  initialState: null, 
  reducers: {
  addData(state, action) {
     state = action.payload;
     return state;
   }
 } 
});

这行得通。

但这很奇怪，不应该这样工作。

【讨论】：