Как использовать избыточное состояние с реагирующими хуками - PullRequest
Новая
       10

Как использовать избыточное состояние с реагирующими хуками

1 голос
/ 08 марта 2019

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

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

Я знаю, что у реагирующего API есть метод useReducer, это можно использовать для отправки избыточных действий?Я искал учебник / пример, но не могу найти какие-либо ресурсы в Интернете для этого.Возможно, я иду по неверному пути, но хотел бы знать, если я.Спасибо.

Ответы [ 2 ]

1 голос
/ 10 марта 2019

Я не большой пользователь Redux (, я предпочитаю MobX), поэтому я мог бы пропустить некоторые тонкие аспекты.Но из того, что я вижу, это довольно просто, и React docs на крючках дает очень хороший пример : 

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

Вместо reducer, вы можете просто использовать один из связанных редукторов изваша существующая база кодов управления состоянием.Просто импортируйте его в файл компонента и передайте его useReducer в качестве первого аргумента.Состояние, которое вы вернете оттуда, станет новым состоянием для компонента, и оно будет автоматически перерисовываться вместе с ним.Очевидно, вам нужно будет отключить такой компонент от Redux (, если он подключен ).В противном случае, как было упомянуто в одном из комментариев, вы получите избыточную логику управления состоянием.

Однако на вашем месте я бы не стал переписывать ее для ловушек без крайней необходимости.

0 голосов
/ 11 марта 2019

При использовании Redux с хуками ничего не меняется, Redux Higher Order Component не имеет ничего общего с хуками.useReducer не предназначен для отправки действий Redux, но для обновления внутреннего состояния компонента так же, как Redux.

Так что, когда вы используете useReducer, вы будете отправлять действия, обновлять состояние с помощью редуктора и т. Д.но не состояние Redux!Вместо этого вы делаете это с состоянием компонента.

Компонент, который потребляет useReducer, является стандартным компонентом с внутренним состоянием (для управления состояниями ввода или как угодно), как обычно, перед хукамиродился, в Redux's Connect HOC.

Если это может быть полезно, вы можете разъяснить свои идеи с помощью этой записи

...