Как использовать хуки React + Redux
Это лучший способ подключить магазин Redux с хуками?
Привет, я делаю простое приложение todo, используя хуки React, подключенные к Redux. Шаблон, который я создал, работает, но мне интересно, правильно ли я это делаю, есть ли что-то неправильное в этом подходе, есть ли другой шаблон, который следует использовать?
App.jsx
const [initialTodos, updateTodos] = useState(store.getState());
const cleanup = store.subscribe(() => updateTodos(store.getState()));
useEffect(() => {
return () => cleanup();
});
dispatching happens in other components + the todo app works
Спасибо за любой вклад
Ответы 2
Оказывается, лучше тоже использовать 'react-redux' connect.
const mapStateToProps = state => ({state: state})
connect(mapStateToProps)(Component)
поскольку connect автоматически заботится о store.subscribe и т. д.
Так что бросайте хуки все вместе :)
когда появляются хуки, чтобы сделать наш код намного проще, так почему мы должны использовать старые способы? Как ранее прокомментировал @Hugodby, использовать useSelector и useDispatch проще.
react-redux пакет поддерживает хуки, начиная с версии 7.1. Вместо функции connect() можно использовать хуки Redux.
Это пример реализации счетчика, где значением счетчика управляет Redux.
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
export const CounterComponent = () => {
const dispatch = useDispatch();
const counter = useSelector(state => state.counter);
return (
<div>
<span>{counter}</span>
<button onClick = {() => dispatch({ type: 'INCREMENT_COUNTER' })}>
Increment counter
</button>
</div>
);
}
Источник: https://react-redux.js.org/api/hooks
Это устарело.
connect()больше не нужен. Пожалуйста, проверьте мой ответ для текущей реализации.