Как работает javascript разрушение объекта?

Question

Я пытаюсь понять этот пример React redux на: https://codesandbox.io/s/f2ded

В редуктор. js, начальное состояние:

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

В приложении. js у нас есть:

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

У state нет свойства list, и оно state.list должно быть пустой объект {}. Но на самом деле это

Благодарим за любую помощь в понимании того, как именно это работает. Спасибо.

Answer 1

Это потому, что в нижней части combReducers

const reds = combineReducers({ list });

export default reds;

Это означает, что все в этой части состояния Redux равно state.list.taskName или state.list.tasks et c.

[править] просто хотел добавить ясности из официальных документов, 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? ...
  }
}

Answer 2

Чтобы глубже понять это, вам нужно узнать о 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? ...
    }
}

Вы можете управлять именами ключей состояния, используя разные ключи для редукторы в пропущенном объекте. Например, вы можете вызвать combineReducers({ todos: myTodosReducer, counter: myCounterReducer }), чтобы форма состояния была { todos, counter }.

. Общепринятое соглашение - именовать редукторы после срезов состояния, которыми они управляют, поэтому вы можете использовать сокращенную запись свойства ES6: combineReducers({ counter, todos }). Это эквивалентно написанию combineReducers({ counter: counter, todos: todos }).

Поэтому, когда вы используете ...state.list, вы получаете его из-за combineReducers({ list: listReducer }) или simply combineReducers({ list})

Знать больше, пожалуйста, следуйте: объединить редуктора