I'm facing a problem accessing initialstates array of object for redux.

I have this initial states:

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

and I only want to change the filterStatus from my reducer. But trying to do so its changing and also adding one more object in the array.

I was trying this code from my reducer:

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

      ];

How can I change get rid of this problem?

CodePudding user response：

What you are doing here:

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

Is creating a new object with the entirety of state - (...state) And then modifying the 2nd item's filter status, but only returning the result of the expression which is the newly set value "author".

There are many ways to implement what you wanted, I think the simplest would be to copy the array then modify the copy before returning.

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

What this does is:

1. Create a shallow copy of the array - this copies the same object references to a new array
2. Overwrite item at index 1 with a new object that spreads (copies) the original and then overwrites the required key

Another possible solution would be to use map or reduce on the array and returning the modified new array, or splice a new object at the correct index

CodePudding user response：

You can use splice state.splice(1, 1, { filterStatus: "author" } to remove the { filterStatus: "" } and set instead { filterStatus: "author" } and return a copy of the state by 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())

CodePudding user response：

Use var instead of const

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