#reactjs #redux #react-hooks
#reactjs #redux #реагирующие перехватчики
Вопрос:
Итак, недавно мы решили начать использовать хуки в нашем текущем приложении react. Мы используем redux для управления состоянием, и мой вопрос был в том, как это работает с перехватчиками?
Я прочитал несколько статей, в которых люди используют context api с помощью hooks для создания менеджера состояний, но я бы хотел пока продолжать использовать redux.
Я знаю, что в react api есть useReducer метод, можно ли его использовать для отправки действий redux? Я искал руководство / пример, но, похоже, не могу найти никаких ресурсов в Интернете для этого. Возможно, я иду по неверному пути, но хотел бы знать, так ли это. Спасибо.
Комментарии:
1. Я наткнулся на этот проект пару дней назад, возможно, это могло бы вам помочь? github.com/dai-shi/react-hooks-easy-redux
2. @KenoClayton Спасибо, что поделились. Я пытался выяснить, есть ли способ сделать это только с помощью нового api hooks
3. Redux уже управляет состоянием вашего компонента, использование useReducer будет управлять вызовами redux вашего компонента, это будет двойной слой, и я действительно не вижу смысла в этом.
4. официального решения для этого пока нет, поскольку необходимо преодолеть некоторые проблемы с производительностью. На данный момент я бы сказал, что лучшим подходом было бы продолжать использовать Redux connect HOC с вашими функциональными компонентами так же, как вы используете компоненты своего класса.
5. К вашему сведению, я создал абстракцию поверх Redux, которая использует перехватчики. Может представлять интерес: github.com/ctrlplusb/easy-peasy
Ответ №1:
При использовании Redux ничего не меняется с хуками, компонент Redux более высокого порядка не имеет ничего общего с хуками. useReducer предназначен не для отправки действий Redux, а для обновления внутреннего состояния компонента таким же образом, как это делает Redux.
Таким образом, при использовании useReducer вы будете отправлять действия, обновлять состояние с помощью редуктора и т.д., Но не состояние Redux! Вместо этого вы делаете это с состоянием компонента.
Компонент, который потребляет useReducer , является стандартным компонентом с внутренним состоянием (для управления входными состояниями или чем угодно еще, что вы хотите), завернутым, как обычно, перед рождением перехватчиков, в Redux’s connect HOC.
Если это может быть полезно, вы можете прояснить свои идеи с помощью этого сообщения
Комментарии:
1. Спасибо. Провел еще несколько исследований и тоже пришел к такому выводу.
2. Этот комментарий очень полезен, мне потребовалось довольно много времени, чтобы понять, что
useReducerна самом деле не обновляет состояние Redux. Спасибо!
Ответ №2:
Я не большой пользователь Redux (я предпочитаю MobX ), поэтому я могу упускать из виду некоторые тонкие аспекты. Но из того, что я вижу, это довольно просто, и документы React о хуках предоставляют очень хороший пример:
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 (если он подключен). В противном случае, как упоминалось в одном из комментариев, вы получите избыточную логику управления состоянием.
Однако на вашем месте я бы не переписывал его для хуков без какой-либо крайней необходимости.