在 createAsyncThunk 方法中覆盖对象属性

Question

我有这样的功能

export const fetchChildrenNews = createAsyncThunk('news/fetch1', async ([item, news]) => {
      const res = await Promise.all(item.kids.map(id => {
        let url = `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`;
        return fetch(url);
      }));
      const jsons = await Promise.all(res.map(r => r.json()));
      let users = {...item, kids: jsons};
      item.kids = []//doesn't work
      item.id = 0 //doesn't work

      //I want to find a branch in the original tree and replace it

      const tree = (obj) => {
          for (let key in obj) {
              if (key === "id" && obj[key] === users.id) {
                obj = users;
              }

              if (key == "kids") {
                tree(obj);
              }
          }
      }

      tree(item);

其中 item 是一个嵌套对象 记录：{by: 'nullzzz', descendants: 47, id: 28808556, kids: Array(13), score: 117}。 kids 属性包含 id 数组，在 users 变量中它变成了 records 数组。我的目标将 record.kids = [0, 7, 14] 更改为 record.kids = users ([{by: '...', id:4848,..], [{by: 'adasd'], [{by: 'zzz}] )。变量 news 是一棵完整的树，而 item 是它的分支。我刚开始使用该工具包，所以我不完全理解这个

Answer 1

由于 item 可能是您的 Redux 存储中的对象，thunk 会尝试修改对您的存储的引用 - 修改存储只允许在 reducer 中使用。

通常，您应该在 reducer 中执行这样的逻辑，而不是在 thunk 中。

所以，做

export const fetchChildrenNews = createAsyncThunk('news/fetch1', async ([item, news]) => {
      const res = await Promise.all(item.kids.map(id => {
        let url = `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`;
        return fetch(url);
      }));
      const jsons = await Promise.all(res.map(r => r.json()));
      return jsons
})

然后在您的切片中添加逻辑：

builder.addCase(fetchChildrenNews, (state, action) => {
  const jsons = action.payload

  // here, do not modify `items`, but modify `state` - I would assume `items` is somewhere in here anyways?
})

在 createAsyncThunk 方法中覆盖对象属性

override object properties in createAsyncThunk method

redux-toolkit