Search code examples
reactjsreduxstatepayload

Can't send data to the state


I have been trying to add the functionality of adding favourites in the movie app I created by watching a tutorial about Redux, but for some reason the state is always empty.
This is what my action and reducers look like

Reducers

const initState = {
  favourites: [],
};

const favouriteReducer = (state = initState, action) => {
  switch (action.type) {
    case "ADD_FAVOURITE":
      return {
        ...state,
        favourites: action.payload.favourites,
      };
    default:
      return { ...state };
  }
};

export default favouriteReducer;

actions

 export const favouriteActions = () => {
  return {
    type: "ADD_FAVOURITE",
    payload: "zz",
  };
};

The action is dispatched and showed in the redux dev tools too but nothing is added to the favorite state which I have created.

I have this onclick event set to an image of the star on which I actually want to pass in the Id of the movie which I have access to from another state.

const addFav = () => {
    dispatch(favouriteActions(id));
  };
reutrn{
<img src={favNot} onClick={addFav} />
}

I am just posting the main part of my component file here. I have also attached an Image showing my current state after I click in the image.

after clicking on the image

after clicking on the image my state


Solution

  •  return {
        ...state,
        favourites: action.payload.favourites,
      };
    

    Just only need "action.payload" or if you want favourites like array should change reducer : favourites : [...state.favourites,action.payload]