如何从减速器访问 object 的初始 state 数组

Question

我在访问 redux 的 object 的初始状态数组时遇到问题。

我有这个初始状态：

 export const initialState = [
  {
    blogPosts: [
      {
        title: "",
        category: "",
        logo: "",
        author: "",
        date: "",
        timeToRead: "",
        blogImage: "",
      },
    ],
  },
  { filterStatus: "" },
  { filterBy: "" },
];

我只想从我的reducer更改filterStatus 。 但是尝试这样做会改变并在阵列中再添加一个 object 。

我正在从我的减速器中尝试这段代码：

case SEARCH_AUTHOR:
      return [
        ...state,   
        (state[1].filterStatus = "author"),

      ];

我怎样才能改变摆脱这个问题？

Answer 1

你在这里做什么：

case SEARCH_AUTHOR:
  return [
    ...state,   
    (state[1].filterStatus = "author"),
];

正在创建一个带有全部 state 的新state - ( ...state ) 然后修改第二个项目的过滤器值，但只返回表达式的"author"结果。

有很多方法可以实现您想要的，我认为最简单的方法是复制数组，然后在返回之前修改副本。

case SEARCH_AUTHOR:
  const copy = [...state]
  copy[1] = {...copy[1], filterStatus: 'author'}
  return copy;

这是做什么的：

1. 创建数组的浅拷贝 - 这会将相同的 object 引用复制到新数组
2. 用新的 object覆盖索引1处的项目，该 object 传播（复制）原始文件，然后覆盖所需的密钥

另一种可能的解决方案是使用map或在数组上reduce并返回修改后的新数组，或在正确的索引处splice新的 object

Answer 2

您可以使用 splice state.splice(1, 1, { filterStatus: "author" }删除{ filterStatus: "" }并设置{ filterStatus: "author" }并通过return [...state] .

 const initialState = [ { blogPosts: [ { title: "", category: "", logo: "", author: "", date: "", timeToRead: "", blogImage: "", }, ], }, { filterStatus: "" }, { filterBy: "" }, ]; const changeFilter = () => { initialState.splice(1, 1, { filterStatus: "author" } ) return [...initialState ]; } console.log(changeFilter())

Answer 3

使用var而不是const

 export var initialState = [
 {
  blogPosts: [
    {
    title: "",
    category: "",
    logo: "",
    author: "",
    date: "",
    timeToRead: "",
    blogImage: "",
    },
    ],
  },
    { filterStatus: "" },
    { filterBy: "" },
 ];