Крючки React: полезны ли они для управления общим состоянием, например, Редукс?

Нет, хуки не полностью устраняют необходимость в Redux. Хуки в основном используются как альтернатива реализации функций, которые мы должны использовать сегодня в классах:

1. Состояние локального компонента
2. Контекст
3. Методы жизненного цикла и побочные эффекты

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

Что с большей вероятностью убьет/заменит Redux, так это контекст вместо хуков, которые позволяют делиться состояние по компонентам. Но контекст IMO не такой мощный, как хранилища Redux, поскольку Redux предлагает другие функции, помимо общего хранилища состояний, такие как промежуточное ПО и специализированный инструмент разработки с возможностями перемещения во времени. Существует также целая экосистема обучения и инструментов, построенная вокруг Redux, которой, насколько мне известно, на данный момент нет в контексте.

Если вы используете хук useReducer в сочетании с контекстом, как в этот пример, это будет очень похоже на использование Redux, а для небольших приложений (например, TodoMVC) этого может быть достаточно. Я не думаю, что для больших приложений достаточно одного контекста и useReducer. Вам может понадобиться несколько из них, и именно здесь использование Redux и создание хранилищ будет иметь смысл. Вы также можете комбинировать несколько контекстов и useReducer хуков, но может быть чище просто использовать Redux.

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

В прошлом вам приходилось использовать Redux, чтобы убедиться, что состояние сохраняется между каждым повторным рендерингом компонента. Но теперь вы можете просто использовать метод useState() для реализации постоянного локального состояния! Вы можете использовать useEffect() вместо методов жизненного цикла React, и вы можете использовать useReducer для написания методов создания быстрых действий и доступа к глобальному состоянию!!

Вот хорошая статья о том, как использовать useReducer () метод.

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

Обратите внимание, Redux — это просто управление состоянием. Не реактивная библиотека. Вы можете использовать Redux в любом проекте.

В будущем, возможно, коннектор redux (react-redux) будет убит или перестанет использоваться хуками, но сам Redux — это потрясающая библиотека, потому что она наводит порядок внутри приложения, которое должно обрабатывать много данных и разрабатываться кучей разработчиков. .

Может быть больше случаев использования, когда Redux не нужен, но нет, ни хуки, ни контекст не «убьют» Redux.

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

Хуки и контекст не предназначены для управления состоянием приложения вместо Redux.

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

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

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

Например, если вы работали над приложением для блога и хотели добавить функциональность для обновления своих сообщений в блоге, вы можете применить useReducer следующим образом:

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'add_blogpost':
      return [...state, { title: `Blog Post #${state.length + 1}` }];
    default:
      return state;
  }
};

Итак, это будет ваш редуктор, который вы затем примените так:

export const BlogProvider = ({ children }) => {
  const [blogPosts, dispatch] = useReducer(blogReducer, []);

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

const addBlogPost = () => {
    dispatch({ type: 'add_blogpost' });
  };

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