Использовать Redux или не Redux?

В 2023 году Redux выглядит иначе, чем его прошлые версии. Устаревание большей части его исходного кода в пользу набора инструментов Redux решает множество проблем, поднятых ненавистниками Redux в прошлом, таких как «Настройка хранилища Redux слишком сложна» и «Мне нужно добавить много пакетов в заставить Redux делать что-нибудь полезное» или «Redux требует слишком много стандартного кода». Эти проблемы уже давно решаются командой Redux, но вопрос остается в силе: действительно ли вам нужен Redux?

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

Redux — это библиотека для управления и обновления состояния приложения. Он обеспечивает централизованное «хранилище» состояния, которое используется во всем приложении, с правилами, гарантирующими, что состояние может быть обновлено только предсказуемым образом с использованием «действий». Redux хорошо работает с приложениями, которые имеют большое количество глобального состояния, к которому обращаются многие компоненты приложения. Цель Redux — обеспечить масштабируемое и предсказуемое управление состоянием.

Использование редукса состоит из трех основных частей:

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

const store =createStore()

Создайте действия, которые позволяют изменить состояние

/*
Basic action object for a shopping list
that removes all items from the list
*/
const clearItems = {
  type: 'shopping/clear'
}
/*
Action object for a shopping list
that adds an item to the list
*/
const addItem = {
  type: 'shopping/addItem',
  payload: 'Chocolate Cake'
}

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

/*
 A reducer function that handles 2 actions
 or returns the current state as a default
*/
const shoppingReducer = (
  state = [],
  action
) => {
  switch (action.type) {
    case "shopping/clear":
      return [];
    case "shopping/addItem":
      return [
        ...state, 
        action.payload];
    default:
      /* 
      If the reducer doesn't care 
      about this action type, return 
      the existing state unchanged
      */
      return state;
  }
}

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

/* 
addTodo uses the mutating push() method
*/
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    clearTodos: state => [],
    addTodo: (state, action) 
      => state.push(action.payload)
  }
});

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

Но это похоже на много настроек. большинство из которых необходимо повторять и изменять, когда вы хотите добавить новую часть состояния. Особенно, если учесть, что некоторые библиотеки, такие как react, имеют собственную форму управления состоянием в виде useContext. Итак, еще раз, вам нужен редукс? Если в вашем проекте не так много движущихся частей, и у вас нет планов по его расширению, Redux может не подойти вам. И даже если вы обнаружите, что вам нужна более сложная система управления состоянием, вы всегда можете добавить ее и использовать по своему усмотрению.

Использовать Redux или не Redux?

Вопросы по теме