Vfrdtyky

I'm trying to move from the simple example I've learnt on Medium about Redux to properly modify immutable state with object.assign or the spread operator. However, after I've tried this it creates a key in the original state key with the same name. F.e. I had a state key searchPage: 1 and after converting the reducer I've got searchPage: {searchPage: 1}. I bet it's silly, but I did it according to the Redux docs (I only assume). I've tried object.assign and the spread operator, which have the same results. Here is my old reducer:

export function searchPage(state = 1, action) {

  switch (action.type) {

    case 'SET_SEARCH_PAGE':

      return action.searchPage



    default:

      return state

  }

}

and the new with spread operator:

export function searchPage(state = 1, action) {

  switch (action.type) {

    case 'SET_SEARCH_PAGE':

      return { ...state, searchPage: action.searchPage }



    default:

      return state

  }

}

update Now, I'm using an initialState object to set initial state for all reducers to an object as a default. However, the spread operator syntax now does exactly the same as before, i.e. inserts the initial state key inside the searchPage key, so I still end up with object inside my searchPage key instead of a number. Here's the updated code, I have no idea if I go in the right direction:

const initialState = {

  posts: ,

  postsHasErrored: false,

  postsIsLoading: false,

  searchString: '',

  searchCategories: ,

  searchPage: 10

}



export function searchString(state = initialState.searchString, action) {

  console.log(state)

  switch (action.type) {

    case 'SET_SEARCH_STRING':

      return action.searchString



    default:

      return state

  }

}



export function searchCategories(state = initialState.searchCategories, action) {

  switch (action.type) {

    case 'SET_SEARCH_CATEGORIES':

      return action.searchCategories



    default:

      return state

  }

}



export function searchPage(state = initialState.searchPage, action) {

  switch (action.type) {

    case 'SET_SEARCH_PAGE':

      return { ...state, searchPage: action.searchPage }



    default:

      return state

  }

}

It depends on what your action.searchPage value. I think it's an object. Once go through debugging for action object.

try like this

export function searchPage(state = {}, action) {

  switch (action.type) {

    case 'SET_SEARCH_PAGE':

      return { ...state, searchPage: action.searchPage };



    default:

      return state

  }

}

I had this issue as well.
By researching online I've seen people saying you just needed to initialize your state empty in actions, and while that helped me while I was using only one item from state, it went downhill when I needed two.

This new error happened at my own component file, at mapStateToProps.
Because this works...

const mapStateToProps = state => (

   state.posts

);

But this doesn't...

const mapStateToProps = state => (

   state.posts, state.comments

);

So I'd end up writing...

const mapStateToProps = state => ({

   posts: state.posts,

   comments: state.comments

});

Which would duplicate the key name, causing the arrays to be posts.posts and comments.comments. After trying many different syntaxes, I finally found what works:

function mapStateToProps(state){

  const { posts } = state.posts

  const { comments } = state.comments

  return { posts, comments}

}

Hope it helps someone!