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

Question

[Durin Qurkingo]

Новые хуки были выпущены с версией Redux 7.1.0. Я не понимаю, как использовать эти крючки на практике. Может кто-нибудь привести пример использования этих хуков?

Answer 1

[Антон Спирин]

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 вам, действительно, понадобится на практике.

Answer 2

[Дмитрий Свиридов]

Можешь глянуть тут. Камнями сильно не кидать, я вообще не фронтенд-разработчик))

А вообще вот тут про Redux-хуки много написано, причем с примерами.

Comments

[Durin Qurkingo]

Дмитрий Свиридов в официальной документации для меня нет хорошего премьера.

[Дмитрий Свиридов]

Durin Qurkingo, ну ок. В таком случае погляди пример по первой ссылке.

[Durin Qurkingo]

Дмитрий Свиридов, Спасибо но не помогло.

[Дмитрий Свиридов]

Durin Qurkingo, так а что конкретно не понятно? Я понял это так:

1. useSelector - это, грубо говоря, маппинг значения из стора на переменную. Но "хитрый" маппинг, благодаря которому изменения в этом значении в стор приведут к перерисовке компонента, в котором вызван useSelector для этого значения стора.
   
2. useStore - получение стора целиком (где конкретно такое может пригодиться - не знаю, потому что обычно требуется useSelector для конкретных значений).
   
3. useDispatch - ссылка на функцию dispatch редакс стора. Нужно, чтобы диспатчить экшены
   

[Durin Qurkingo]

Дмитрий Свиридов, смотреть друг мой,вот этот пример,Что означает это строка кода

check1: state.reducer1.check1,
 counter: state.reducer2.counter

Почему в консоли мы получаем не понять не error.

[Дмитрий Свиридов]

Durin Qurkingo, это как раз маппинг значения из стора на переменные check1 и counter.

[Durin Qurkingo]

Дмитрий Свиридов, а что за error?

[Дмитрий Свиридов]

Durin Qurkingo, где именно error и какой? Перешел по ссылке, что ты выше скидывал - там в консоли ошибок нет

[Durin Qurkingo]

Дмитрий Свиридов,

[Дмитрий Свиридов]

Durin Qurkingo,

[Durin Qurkingo]

Дмитрий Свиридов, я написал такой пример
когда я написал так

const x = useSelector(state => state.reduserDD.counter);

Я получаю error ,
а так работает.
const x = useSelector(state => state.counter);
вроде первый случае должен работать.

[Дмитрий Свиридов]

Durin Qurkingo, я, думаю, косяк в этом state.reduserDD.counter - внимательно проверь структуру store. Точно ли там есть reduserDD, у которого есть counter? Меня именно reduserDD смущает. Что ты подразумевал под таким названием? Что там хранится?

[Durin Qurkingo]

Дмитрий Свиридов, забудь про название это просто рандомное имя.попытаюсь сам найти,за ответ Огромное спасибо.

[Дмитрий Свиридов]

Durin Qurkingo, предлагаю перед строкой const x = useSelector(state => state.counter); вывести содержимое хранилища в консоль через console.log(useStore()). Тогда станет ясно, почему ошибку кидает.

[Durin Qurkingo]

Дмитрий Свиридов, один вопрос Ты видел мой 2 пример?.

[Дмитрий Свиридов]

Durin Qurkingo, естественно, видел. Поэтому тебе и написал предыдущее сообщение. "An error occured while selecting the store state: Cannot read property 'counter' of undefined.". Эта ошибка возникает из-за того, что у тебя у store нет свойства reduserDD. Поэтому я тебе и предложил вывести в консоль содержимое store, чтобы понять, что там есть, а чего нет.

По твоему коду я вижу, что у тебя там reducerDD и нет - поэтому, логично, что тебе ошибку кидает. А counter есть, поэтому const x = useSelector(state => state.counter) ошибку не кидает.

[Durin Qurkingo]

Дмитрий Свиридов, вот ошибка

store = createStore(combineReducers({ reducerDD }));