Как работает цепочка действия-редуктора

Question

Итак, я изучил https://codesandbox.io/s/9on71rvnyo, чтобы понять, как работает Redux. Я добрался до части components/VisibilityFilters.js. Я вижу на setFilter(currentFilter), что вызывает действие в redux/actions.js. Но для меня понимание здесь останавливается. Я не понимаю, как это действие связано с редукторами. Это просто вызов функции !?

export default connect(
  mapStateToProps,
  { setFilter }
)(VisibilityFilters);

делают ли все маги c?

Answer 1

Первое, что connect() устанавливает соединение между вашим компонентом и вашим магазином Redux. Вот почему вы экспортируете как connect(mapStateToProps, { actionName })(ComponentName);. Как указано в документации connect():

Функция connect() подключает компонент React к хранилищу Redux. Он предоставляет связанному компоненту фрагменты данных, которые ему нужны из хранилища, и функции, которые он может использовать для отправки действий в хранилище.

Таким образом, из вашего компонента вы вызываете функцию - действия - то, что вы создали и отправили с dispatch() изменением состояния. Как документация dispatch() гласит:

Отправляет действие. Это единственный способ вызвать изменение состояния. Функция сокращения магазина будет вызываться с текущим результатом getState() и данным действием синхронно. Его возвращаемое значение будет считаться следующим состоянием. Он будет возвращен с getState() с этого момента, и слушатели изменений будут немедленно уведомлены.

В редукторе, основанном на dispatch({type: 'STRING', payload: 'your data'}), оператор switch найдет правильные type изменить состояние. В конце от вашего редуктора возвращаемое значение будет вызывать повторное рендеринг в вашем компоненте.

С довольно простой ничьей, которую я только что сделал:

+ 1 важно:

Иногда я вижу, что разработчики упускают возвращаемое значение из редуктора, что вызывает проблемы. Из документации Обработка действий следует отметить две важные вещи:

1. Мы не изменяем состояние. Мы создаем копию с Object.assign(). Object.assign(state, { visibilityFilter: action.filter }) также неверно: он мутирует первый аргумент. Вы должны предоставить пустой объект в качестве первого параметра. Вы также можете включить предложение оператора растяжения объекта для записи { ...state, ...newState }.

2. Мы возвращаем предыдущее состояние в случае по умолчанию. Важно вернуть предыдущее состояние для любого неизвестного действия.

Надеюсь, это прояснит!