Redux : TypeError: state.favorites.concat不是函数

Question

我正在使用redux工具包，遇到了一个问题，无法将结果推入我声明的数组中。这是我最初的状态：

const initialState = {
  favorites: [],
  isError: false,
  isSuccess: false,
  isLoading: false,
  message: "",
};

在我的应用程序的仪表板中，我想显示我使用useEffect的状态下的收藏夹：

useEffect(() => {
    if (isError) {
      console.log(message);
    }

    if (!user) {
      navigate("/login");
    }

    //dispatch(getFavorites());

    // return () => {
    //   dispatch(reset());
    // };
  }, [user, navigate, isError, message, dispatch]);

当我取消对调度进行注释以获得收藏时，就会出现问题，下面是我服务中的getFavorites：

//Get user favorites
const getFavorites = async (token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  const response = await axios.get(API_URL, config);

  return response.data;
};

下面是我如何创建一个最爱的方法：

const createFavorite = async (favoriteData, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  var qs = require("qs");

  var data = qs.stringify({
    address: favoriteData.location["address1"],
    phone: favoriteData.display_phone,
    rating: favoriteData.rating.toString(),
    price: favoriteData.price,
  });

  console.log(favoriteData);
  const response = await axios.post(API_URL, data, config);

  return response.data;
};

这是在片文件中发生错误的地方，在这里，我的额外还原器是：

export const favoriteSlice = createSlice({
  name: "favorite",
  initialState,
  reducers: {
    reset: (state) => initialState,
  },
  extraReducers: (builder) => {
    builder
      .addCase(createFavorite.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(createFavorite.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.favorites.concat(action.payload);
      })
      .addCase(createFavorite.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
      })
      .addCase(getFavorites.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(getFavorites.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.favorites = action.payload;
      })
      .addCase(getFavorites.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
      });
  },
}); 

错误发生在行: state.favorites.concat(action.payload)

我是否以错误的格式返回数据？我是新的redux和遵循一个教程，所以我不知道如何解决这个问题。任何帮助都将不胜感激。

Answer 1

.concat()不变异，它返回一个副本，所以您还必须在这里将state.favorites重置为它：

  .addCase(createFavorite.fulfilled, (state, action) => {
    state.isLoading = false;
    state.isSuccess = true;
    state.favorites = state.favorites.concat(action.payload);
  })

至于错误，您的state.favorites似乎要么未定义，要么设置为非数组/字符串值。.concat()只适用于数组或字符串。