Редукс, как действия передаются конкретному редуктору

Question

У меня приличное понимание Redux.

Мне интересно одно: в большом приложении будет несколько действий и переходов.

Мой вопрос

• Когда отправляется действие, как оно находит подходящий редуктор?

• Может ли быть дублирующее действие в редукторе?

• Как данные измененного состояния передаются от редуктора к компоненту?

Даже когда я смотрю на избыточный поток, я не понимаю этих вопросов

Пожалуйста, устраните мою путаницу.

Answer 1

1. Когда отправляется действие, как оно находит соответствующий редуктор?

Все действия проходят через все редукторы и промежуточное ПО в вашем приложении, поэтому у вас есть оператор switch для обработки, если определенный редуктор будет обрабатывать определенное действие.

2. Могут ли быть дублирующие действия в редукторе?

Вы можете отправлять действие и обрабатывать его в нескольких редукторах.

3. Как измененные данные состояния передаются от редуктора к компоненту?

Когда вы подключаете компонент с помощью приставки через connect HOC, вы подписываете свой компонент на хранилище, и магазин работает, когда он изменяется, он уведомляет компоненты, подписанные, тогда выполняется mapStateToProps и генерирует новые данные для компоненты, если данные изменились, компонент будет обновлен, иначе не будет.

Надеюсь, это поможет вам, если у вас есть какие-либо сомнения, пожалуйста, дайте мне знать.

Answer 2

Когда отправляется действие, как оно находит подходящий редуктор?

Когда отправляется действие, и если вы используете комбинированные редукторы, все редукторы будут сработать. Соответствующее изменение состояния происходит в дереве, где action.TYPE совпадает с отправленным action.TYPE.

Может ли быть дублирующее действие в редукторе?

Давайте подумаем о приложении чата. Скажем, когда приходит новое сообщение и есть два хранилища с именами messageStore и unreadStore. И есть действие под названием NEW_MESSAGE. Все два магазина будут обновляться при получении новых сообщений.

message = (state=[], action) ->
  switch action.type
    when NEW_MESSAGE
      state # new state

unread = (state=[], action) ->
  switch action.type
    when NEW_MESSAGE
      state # new state

combineReducer {message, unread}

В одном и том же редукторе вы можете выполнить одно и то же действие дважды, но это не нужно. В разных редукторах вы можете сделать это, как указано.

Как данные измененного состояния передаются от редуктора к компоненту?

1. Ваш глобальный магазин передается на компоненты через провайдера. Согласно документации Redux, <Provider /> делает хранилище Redux доступным для любых вложенных компонентов, которые были упакованы в функцию connect().

import { Provider } from 'react-redux';
const store = createStore(combineReducer(message, unread));
<Provider store={store}>
   <App />
</Provider>

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

class ReduxEmpl extends React.Component {
  render() {
    return <div>I'm connected</div>
  }
}

const mapStateToProps = state => ({ messages: state.message.messages })
const dispatchToProps = dispatch => ({ functionToDispatch: (params) => dispatch(functionToDispatch(params));

export default connect(mapStateToProps, mapDispatchToProps)(ReduxEmpl);

Надеюсь, я решил вашу путаницу:)