使用@reduxjs/toolkit 时无法更新 redux 中的 state

Question

我目前开始学习 redux。我的代码与核心 redux 完美配合，然后我尝试了@reduxjs/toolkit，现在我无法访问 function 来更改商店中的 state。 这是我的减速器代码。

const seasonEdits = createSlice({
  name: "seasons",
  initialState: [],
  reducers: {
    addSeason(state, action) {
      state.push(action.payload);
      console.log("this here");
    },
    removeSeason(state, action) {
      state.filter((season) => season.id !== action.payload);
    },
    markComplete(state, action) {
      state.map((season) => {
        if (season.id == action.payload) season.isWatched = !season.isWatched;
      });
    },
  },
});

export const { addSeason, removeSeason, markComplete } = seasonEdits.actions;
export default seasonEdits.reducer;

和我的 store.js 文件

import { configureStore } from "@reduxjs/toolkit";

import seasonReducer from "./reducer";

export default store = configureStore({
  reducer: {
    seasons: seasonReducer,
  },
});

和具有添加功能的 add.js 文件。 调用handleSubmit function 创建一个 object 并将其添加到存储中的数组 state。

 const handleSubmit = async () => {
    try {
      if (!name || !totalNoSeason) {
        return alert("Please add both fields");
      }

      const seasonToAdd = {
        id: shortid.generate(),
        name,
        totalNoSeason,
        isWatched: false,
      };

      addSeason(seasonToAdd);

      navigation.navigate("Home");
    } catch (error) {
      console.log(error);
    }
  };


const mapDispatchToProps = (dispatch) => {
  return {
    addSeason: (data) => dispatch(addSeason(data)),
  };
};

Add.propTypes = {
  addSeason: propTypes.func.isRequired,
};

export default connect(null, mapDispatchToProps)(Add);

Answer 1

问题是array.map()和array.filter () 返回新的arrays，现在你的 reducers 正在调用这些函数：然后扔掉新数组：

removeSeason(state, action) {
  // The return value is thrown away and ignored!      
  state.filter((season) => season.id !== action.payload);
},

您需要返回新值：

removeSeason(state, action) {
  // Now RTK will see the new return value      
  return state.filter((season) => season.id !== action.payload);
},

有关详细信息，请参阅https://redux-toolkit.js.org/usage/immer-reducers#resetting-and-replacing-state 。