未处理的拒绝（TypeError）：state.push 在使用 redux thunk 时不是一个函数

Question

我收到此错误未处理的拒绝（TypeError）：state.push 在使用 redux thunk 时不是一个函数，但在错误后刷新页面时，新词被添加到数据库中。

下面是我的代码。

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const getDictionaryAsync = createAsyncThunk(
  "dictionary/getDictAsync",
  async () => {
    let res = await fetch("https://vocabulary-app-be.herokuapp.com/dictionary");
    if (res.ok) {
      let dictData = await res.json();
      return { dictData };
    }
  }
);

export const addWordtoDictAsync = createAsyncThunk(
  "dictionary/addWordtoDictAsync",
  async (payload) => {
    let res = await fetch(
      "https://vocabulary-app-be.herokuapp.com/dictionary",
      {
        method: "POST",
        body: JSON.stringify({ word: payload.word }),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    if (res.ok) {
      let data = await res.json();
      console.log(data);
      return { data };
    }
  }
);

const dictionarySlice = createSlice({
  name: "dictionary",
  initialState: [],
  reducers: {},
  extraReducers: {
    [getDictionaryAsync.fulfilled]: (state, action) => {
      return action.payload.dictData;
    },
    [addWordtoDictAsync.fulfilled]: (state, action) => {
      console.log(action.payload.data + "reducer");
      state.push(action.payload.data);
    },
  },
});

export default dictionarySlice.reducer;

Answer 1

问题

问题是第一次调用获取字典会改变状态不变量，从数组到对象。来自 "https://vocabulary-app-be.herokuapp.com/dictionary" 的 JSON 响应对象是一个带有 message 和 data 键的对象。

{
  "message": "Your data is here",
  "data": [ .... your dictionary data array ]
}

getDictionaryAsync returns 一个带有 dictData 键的对象。

export const getDictionaryAsync = createAsyncThunk(
  "dictionary/getDictAsync",
  async () => {
    let res = await fetch("https://vocabulary-app-be.herokuapp.com/dictionary");
    if (res.ok) {
      let dictData = await res.json();
      return { dictData }; // <-- returned in action payload
    }
  }
);

并且 reducer case 将状态设置为此有效负载值。

[getDictionaryAsync.fulfilled]: (state, action) => {
  return action.payload.dictData;
},

现在你的状态是：

{
  "message": "Your data is here",
  "data": [ .... your dictionary data array ]
}

而且无法推入。

解决方案

我想你只是想要 dictData.data 数组作为有效载荷，或者只是 data 属性直接来自返回的 dictData 对象。

export const getDictionaryAsync = createAsyncThunk(
  "dictionary/getDictAsync",
  async () => {
    let res = await fetch("https://vocabulary-app-be.herokuapp.com/dictionary");
    if (res.ok) {
      let dictData = await res.json();
      return dictData.data; // <-- returned data property as payload
    }
  }
);

...

[getDictionaryAsync.fulfilled]: (state, action) => {
  return action.payload; // <-- return data payload as state
},

未处理的拒绝（TypeError）：state.push 在使用 redux thunk 时不是一个函数

Unhandled Rejection (TypeError): state.push is not a function while using redux thunk

reactjs

redux-thunk

react-redux

问题

解决方案