What does return { ...state, } in this reducer exactly mean?

user_6658789 0
Viewed 10263

This is reducer_posts.js from very simple blog react-redux app.

import _ from 'lodash';
import { FETCH_POSTS, FETCH_ONE_POST, DELETE_POST } from '../actions/index';

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

  switch (action.type) {

    case DELETE_POST:
      return _.omit(state, action.payload);

    case FETCH_ONE_POST:
      return { ...state, [action.payload.data._id]: action.payload.data };

    case FETCH_POSTS:
      return _.mapKeys(action.payload.data, '_id');

    default:
      return state;
  }
}

_.omit(state, action.payload) is returning state without action.payload, so it is returning state without deleted post.

_.mapKeys(action.payload.data, '_id') creates an object with the same values as initial object, but new object has new key taken from action.payload.data._id

But I can't just get what in that code, this piece of syntax exactly does:

return {  ...state, [action.payload.data._id]: action.payload.data };

What does this line of code do? What does ... mean?

react-redux redux reactjs javascript
2 Answers

This line creates a brand new object based on all the available properties of current state and only updates the "action.payload.data._id" parameter.

as an example: When Redux is used as the application state management paradigm, to notify Redux about any changes in states, a new state object (reducer output) should be created to ensure the Redux that there is an actual state change occurred, (therefor the component will be re-rendered)

user_106166950
Related