Освоение рабочего процесса Redux: понимание создателей Dispatch и Action

В наших предыдущих уроках мы заложили основу для понимания Redux в приложении React. Теперь давайте еще больше усовершенствуем ваши навыки Redux, сосредоточившись на том, как обрабатывать более сложные рабочие процессы с использованием dispatch и создателей действий.

«Код похож на юмор. Когда приходится объяснять, это плохо». — Кори Хаус

1. Понимание отправки

Dispatch — это метод, предоставляемый магазином Redux. Его роль заключается в отправке действий в хранилище Redux для запуска обновлений состояния. Мы уже видели dispatch в действии в наших предыдущих уроках. Немного переделаем:

import { createStore } from 'redux';

// Assume our `todoReducer` is defined.
let store = createStore(todoReducer);

store.dispatch({
  type: 'ADD_TODO',
  payload: { text: 'Learn Redux' }
});

console.log(store.getState());  // [{ text: 'Learn Redux' }]

В этом примере мы используем store.dispatch для отправки действия ADD_TODO.

2. Определение создателей действий

Ввод всего объекта действия каждый раз, когда мы хотим отправить действие, может быть громоздким. Вместо этого мы можем определить функции, которые создают и возвращают эти объекты действий. Эти функции известны как создатели действий.

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: { text }
  };
}

В этом примере addTodo — это создатель действия, который возвращает действие ADD_TODO с заданным text.

3. Отправка действий с помощью создателей действий

Когда у нас есть создатель действий, мы можем использовать его с dispatch для отправки действий в наш магазин Redux. Вот как:

store.dispatch(addTodo('Learn more about Redux'));

В этом примере мы используем нашего создателя действия addTodo с store.dispatch для отправки нашего действия.

4. Привязка создателей действий

Библиотека react-redux предоставляет функцию bindActionCreators, которая автоматически привязывает отправку к создателям действий. Это может быть особенно удобно, когда у вас много создателей действий.

import { bindActionCreators } from 'redux';

// Assume addTodo and removeTodo are action creators.
const boundActionCreators = bindActionCreators({ addTodo, removeTodo }, store.dispatch);

// Now you can call them directly!
boundActionCreators.addTodo('Learn more about Redux');

В этом примере bindActionCreators привязывает store.dispatch к нашим создателям действий, позволяя нам вызывать их напрямую.

Вы становитесь лучше в Redux с каждым днем! Понимая dispatch и создателей действий, вы научитесь делать свой код Redux чище и удобнее в сопровождении. В следующий раз мы углубимся в более сложную тему: обработка асинхронных действий в Redux. Продолжайте учиться и удачного кодирования!

Если вам понравилась статья и вы хотите выразить свою поддержку, сделайте следующее:

👏 Аплодируйте истории (50 аплодисментов), чтобы эта статья попала в топ

👉Подпишитесь на меня в Среднем

Посмотрите больше контента в моем профиле Medium