Блог

У меня большая проблема с пониманием redux. Хуже всего, я должен использовать его с vanillia js, но сначала я должен понять элементы redux. И хорошо, я понимаю редуктор. Есть состояния и функции. Но действие? Есть только название возможных действий, таких как:

 const ADD = 'ADD'

export function add(number) {
  return { type: ADD, number}
}
  

И только то, что мне дано, чтобы затем в switch / case в reducer, который я добавил, я запустил некоторую функцию (из reducer). И я не понимаю, что на самом деле должна делать эта функция add. У меня есть функции в reducer, так зачем мне что-то, что возвращает мне тип и число? Даже если у меня много функций, action дает мне только больше имен, переменных и функций, а в итоге большой беспорядок и проблемы с поиском чего-либо. И redux должен дать что-то противоположное.

И я действительно понимаю, что проблема в том, что я чего-то не понимаю, и если я это понимаю, redux должен дать мне четкое и понятное глобальное хранилище.

Итак, пожалуйста, кто-нибудь может мне помочь с этим?

То, о чем вы говорите, называется «Создатели действий«.

Они не являются строго обязательными. Вы можете dispatch напрямую вызывать like dispatch({ type: ADD, number}) . Но большинство людей предпочитают использовать создателей действий, чтобы они могли вызывать dispatch(add(number)) . Он добавляет уровень абстракции, чтобы вы могли вызывать действие без необходимости знать, как структурирован базовый объект действия. И это упрощает ситуацию, если объект действия сложный.

«Действие» в redux — это объект, который имеет type свойство, а также содержит всю другую информацию, необходимую редуктору для выполнения действия. В вашем случае дополнительная информация — это просто a number , но она может быть более сложной.

Это ваше действие:

 { type: ADD, number}
  

Создатель действия — это функция, которая принимает некоторые аргументы и использует эти аргументы для создания объекта действия.

Это ваш создатель действий:

 export function add(number) {
  return { type: ADD, number}
}
  

Ваш очень простой, но вот пример, чтобы показать вам, как это может быть сложнее.

 export function updateUser(userId, changes) {
    return {
        type: UPDATE_USER,
        payload: {
            id: userId,
            changes,
        },
        meta: {
            timestamp: Date.now(),
        }
    };
}
  

Эта функция не делает ничего, кроме создания действия. Он не обновляет пользователя — это задача редуктора.

Если вы хотите уменьшить количество шаблонов, вы можете рассмотреть возможность использования пакета Redux Toolkit, который упрощает работу, автоматически создавая действия на основе reducer .