Как добавлять значение в массив в redux toolkit?

Вот мой код редюсера, в нем не работает функция add, данные просто не добавляются в state,в payload приходят объекты с данными

export const Cardslice = createSlice({
name: 'card',
initialState: [],
reducers: {
    add: (state, action) => {
          return state.concat(action.payload)
   
     
    },
    addStar: (state: any, action) => {
        state[state.findIndex((i: any) => i.id === action.payload.id)].stars = action.payload.value
    },
    loaded: (state, action) => {
        state = action.payload
    },
    addToFavorite: (state: any, action) => {
        state[state.findIndex((i: any) => i.id === action.payload.id)].favorites = action.payload.favorites;
        console.log(state[0])
    }
},
});



export const { add, addStar, loaded, addToFavorite } = Cardslice.actions


export const selectCard = (state: any) => state.card



export default Cardslice.reducer

возможно я неправильно пытаюсь достать данные из state

export const FavoritesPage:React.FC=()=>{

const favoriteCards=useSelector(selectCard)

    return(
        <>
     
        {favoriteCards.map((i:any)=>console.log(i))}
        {console.log(favoriteCards)}
        </>
    )
}

Ответы (1 шт):

Автор решения: Евгений Платов

вы не должны менять state в reducer. Нужно создавать копию, мутировать ее и возвращать новое состояние. React`у нужно старое состояние чтобы понять что изменилось. Тоже касается остальных редюсеров.

add: (state, action) => {return [...state].push(action.payload)}
→ Ссылка