How to update nested state in redux

Question

I'm a bit stuck with redux. I want to create reducer that can update state onClick with data that provided in each button.

Here's my TabSlice.ts

    interface ITabContext {
    tabIndex: number,
    posterUrlFetch: string,
    tabData: {
        fetchUrl: string;
        title: string;
    }[]
}

const initialState = {
    tabIndex: 0,
    posterUrlFetch: 'movie/popular',
    tabData: [
        { fetchUrl: 'movie/popular', title: 'Trending' },
        { fetchUrl: 'movie/upcoming', title: 'Upcoming' },
        { fetchUrl: 'tv/popular', title: 'TV Series' },
    ]
}

const tabSlice = createSlice({
    name: 'tab',
    initialState: initialState as ITabContext,
    reducers: {
        changeTab(state, action: PayloadAction<ITab>) {
            const newItem = action.payload;
            return state = {
                tabIndex: newItem.tabIndex,
                posterUrlFetch: newItem.posterUrlFetch,
                tabData: [
                    { fetchUrl: newItem.posterUrlFetch, title: newItem.posterUrlFetch },

                ]
            }
        }
    }
})

Then I dispatch changeTab in my component and create function onClick:

    const click = () => dispatch(changeTab({
    tabIndex: 1,
    posterUrlFetch: 'movie/popular',
    tabData: [
      {
        fetchUrl: 'tv/latest',
        title: 'TV Latest'
      },
      {
        fetchUrl: 'movie/popular',
        title: 'Popular'
      },
      {
        fetchUrl: 'movie/latest',
        title: 'Latest'
      },
    ]
  }));

As i click some info updates, but in tabData I have only first object. How to make it to push all data to tabData, not only first one? Thanks!

Badal Saibo · Accepted Answer · 2023-01-05 17:24:02Z

1

Remove return state = {} from your reducer function and instead return the object as a whole.

return {
    tabIndex: newItem.tabIndex,
    posterUrlFetch: newItem.posterUrlFetch,
    tabData: newItem.tabData,
  };

For the payload's tabData you can pass newItem.tabData

answered Jan 5, 2023 at 17:24

Badal Saibo

3,9131 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update nested state in redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related