Vue.js Узнайте, как использовать Redux

Зачем вам нужен Redux
Когда следует использовать Redux?
Неизменяемое Дерево состояний
Действия
- Типы действий должны быть постоянными
- Создатели экшена
Редукторы
- Что такое редуктор
- Чего не должен делать редуктор
- Несколько редукторов
- Имитация редуктора
- Государство
- Список действий
- Редуктор для каждой части штата
- Редуктор для всего штата
Магазин
- Могу ли я инициализировать хранилище с помощью данных на стороне сервера?
- Получение состояния
- Обновите состояние
- Прослушивание изменений состояния
Поток данных

Зачем вам нужен Redux

Redux – это менеджер состояний, который обычно используется вместе с React, но он не привязан к этой библиотеке – его можно использовать и с другими технологиями, но мы будем придерживаться реакции ради объяснения.

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

Перемещение состояния вверх по дереву работает в простых случаях, но в сложном приложении вы можете обнаружить, что перемещаете почти все состояние вверх, а затем вниз с помощью реквизитов.

В версии 16.3.0 React появился контекстный API, который делает Redux избыточным для случая доступа к состоянию из разных частей вашего приложения, поэтому рассмотрите возможность использования контекстного API вместо Redux, если вам не нужна конкретная функция, предоставляемая Redux.

Redux – это способ управления состоянием приложения и перемещения его во внешнее глобальное хранилище .

Есть несколько концепций, которые нужно понять, но как только вы это сделаете, Redux – это очень простой подход к проблеме.

Redux очень популярен в приложениях React, но он никоим образом не уникален для React: существуют привязки практически для любого популярного фреймворка. Тем не менее, я приведу несколько примеров использования React, поскольку это его основной вариант использования.

Когда следует использовать Redux?

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

Простым приложениям это вообще не должно быть нужно (и в простых приложениях нет ничего плохого).

Неизменяемое Дерево состояний

В Redux все состояние приложения представлено одним JavaScript объектом, называемым Состояние или Дерево состояний .

Мы называем это Неизменяемое дерево состояний потому что оно доступно только для чтения: его нельзя изменить напрямую.

Его можно изменить, только отправив Действие .

Действия

Ан Действие является объектом JavaScript, который описывает изменение минимальным способом (только с необходимой информацией):

{
  type: 'CLICKED_SIDEBAR'
}

// e.g. with more data
{
  type: 'SELECTED_USER',
  userId: 232
}

Единственное требование к объекту действия – наличие свойства type , значением которого обычно является строка.

Типы действий должны быть постоянными

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

Когда приложение растет, лучше всего использовать константы:

const ADD_ITEM = 'ADD_ITEM'
const action = { type: ADD_ITEM, title: 'Third item' }

и для разделения действий в их собственных файлах и их импорта

import { ADD_ITEM, REMOVE_ITEM } from './actions'

Создатели экшена

Создатели действий – это функции, которые создают действия.

function addItem(t) {
  return {
    type: ADD_ITEM,
    title: t
  }
}

Обычно вы запускаете создателей действий в сочетании с запуском диспетчера:

dispatch(addItem('Milk'))

или путем определения функции диспетчера действий:

const dispatchAddItem = i => dispatch(addItem(i))
dispatchAddItem('Milk')

Редукторы

Когда выполняется действие, что-то должно произойти, состояние приложения должно измениться.

Это работа редукторов .

Что такое редуктор

/|Редуктор – это чистая функция , которая вычисляет следующее дерево состояний на основе предыдущего дерева состояний и отправленного действия.

;(currentState, action) => newState

Чистая функция принимает входные данные и возвращает выходные данные без изменения входных данных или чего-либо еще. Таким образом, уменьшенное возвращает совершенно новое состояние, которое заменяет предыдущее.

Чего не должен делать редуктор

Редуктор должен быть чистой функцией, поэтому он должен:

никогда не изменяйте его аргументы
никогда не изменяйте состояние, а вместо этого создайте новое с помощью Object.assign({},...)
никогда не создавайте побочных эффектов (никакие вызовы API ничего не меняют)
никогда не вызывайте нечистые функции, функции, которые изменяют свои выходные данные на основе факторов, отличных от их входных (например, Date.now() или Math.random() )

Подкрепления нет, но вы должны придерживаться правил.

Несколько редукторов

Поскольку состояние сложного приложения может быть действительно широким, существует не один редуктор, а множество редукторов для любого вида действий.

Имитация редуктора

По своей сути, Redux можно упростить с помощью этой простой модели:

Государство

{
  list: [
    { title: "First item" },
    { title: "Second item" },
  ],
  title: 'Groceries list'
}

Список действий

{ type: 'ADD_ITEM', title: 'Third item' }
{ type: 'REMOVE_ITEM', index: 1 }
{ type: 'CHANGE_LIST_TITLE', title: 'Road trip list' }

Редуктор для каждой части штата

const title = (state = '', action) => {
    if (action.type === 'CHANGE_LIST_TITLE') {
      return action.title
    } else {
      return state
    }
}

const list = (state = [], action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return state.concat([{ title: action.title }])
    case 'REMOVE_ITEM':
      return state.filter(item =>
        action.index !== item.index)
    default:
      return state
  }
}

Редуктор для всего штата

const listManager = (state = {}, action) => {
  return {
    title: title(state.title, action),
    list: list(state.list, action)
  }
}

Магазин

Магазин – это объект, который:

содержит состояние приложения
предоставляет состояние через getState()
позволяет нам обновлять состояние через отправку()
позволяет нам (отменить) регистрацию прослушивателя изменений состояния с помощью подписки()

Магазин уникален в приложении.

Вот как создается магазин для приложения менеджер списков:

import { createStore } from 'redux'
import listManager from './reducers'
let store = createStore(listManager)

Могу ли я инициализировать хранилище с помощью данных на стороне сервера?

Конечно, просто передайте начальное состояние :

let store = createStore(listManager, preexistingState)

Получение состояния

store.getState()

Обновите состояние

store.dispatch(addItem('Something'))

Прослушивание изменений состояния

const unsubscribe = store.subscribe(() =>
  const newState = store.getState()
)

unsubscribe()

Поток данных

Поток данных в Redux всегда однонаправленный .

Вы вызываете dispatch() в Магазине, выполняя Действие.

Магазин заботится о передаче действия Редуктору, генерируя следующее состояние.

Магазин обновляет состояние и предупреждает всех Слушателей.

Оригинал: “https://flaviocopes.com/redux/”