How is this javascript object destructuring working?

Question

I am trying to understand this React redux example on : https://codesandbox.io/s/f2ded

In reducer.js, the initial state is :

const initialState = {
  taskName: "",
  tasks: []
};

In App.js, we have :

const mapStateToProps = state => {
  return {
    ...state.list
  };
};

The state does not have a property list and it state.list should be an empty object {}. But, it actually holds

Appreciate any help in understanding how exactly this works. Thank you.

Per the description, this shouldn't work. We need more information. Double check what you think you know about the behavior of the code. — Ben Aston, Feb 18 '20 at 12:48
There is no destructuring here. Do you mean the object spread? — VLAZ, Feb 18 '20 at 12:52
The entire code is in the link. Sorry, yes I meant object spread. — Ano, Feb 18 '20 at 21:06

TKoL · Answer 1 · 2020-02-18T15:50:40.043

It's because of the combineReducers at the bottom

const reds = combineReducers({ list });

export default reds;

That means that everything in that part of the Redux state is state.list.taskName or state.list.tasks etc.

[edit] just wanted to add some clarity from the official docs, https://redux.js.org/api/combinereducers/

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// This would produce the following state object
{
  potato: {
    // ... potatoes, and other state managed by the potatoReducer ...
  },
  tomato: {
    // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...
  }
}

score 0 · Answer 2 · answered Feb 18 '20 at 13:35

To understand it more deeply you need to learn about combineReducers

Example

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// This would produce the following state object
{
    potato: {
        // ... potatoes, and other state managed by the potatoReducer ...
    },
    tomato: {
        // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice 
        // sauce? ...
    }
}

You can control state key names by using different keys for the reducers in the passed object. For example, you may call combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) for the state shape to be { todos, counter }.

A popular convention is to name reducers after the state slices they manage, so you can use ES6 property shorthand notation: combineReducers({ counter, todos }). This is equivalent to writing combineReducers({ counter: counter, todos: todos }).

So when you are using ...state.list you are getting it because of combineReducers({ list: listReducer }) or simply combineReducers({ list})

To know more please follow: combineReducers

How is this javascript object destructuring working?

2 Answers2