How to update nested state in redux-CodePudding

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!

CodePudding user response：

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