How to access initial state array of object from reducer

Question

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?

casraf · Accepted Answer · 2022-08-27 13:45:21Z

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:

Create a shallow copy of the array - this copies the same object references to a new array
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

Mina · Accepted Answer · 2022-08-27 12:18:55Z

1

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())

answered Aug 27, 2022 at 12:18

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Comments

iam-raghu-aditya · Accepted Answer · 2022-08-27 12:15:56Z

-2

Use var instead of const

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

answered Aug 27, 2022 at 12:15

iam-raghu-aditya

12 bronze badges

Collectives™ on Stack Overflow

How to access initial state array of object from reducer

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related