Как использовать useStore, useSelector, useDispatch hook?

Новые хуки были выпущены с версией Redux 7.1.0. Я не понимаю, как использовать эти крючки на практике. Может кто-нибудь привести пример использования этих хуков?
  • Вопрос задан
  • 140 просмотров
Решения вопроса 2
@dimuska139
Backend developer
Можешь глянуть тут. Камнями сильно не кидать, я вообще не фронтенд-разработчик))

А вообще вот тут про Redux-хуки много написано, причем с примерами.
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:
const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);


Сейчас:
const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;


2. useSelector - маппинг значения из store.
Раньше:
const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);


const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;


3. useStore - получение store целиком:
const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

Вряд ли useStore вам, действительно, понадобится на практике.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы