@IvanIvanIvanIvanIvan

Hooks Api react. Можно ли используя useReducer заменить state redux?

У нас есть три компонента

1
import React, { useReducer } from 'react';
import { Hook } from './Hook';
export const One = () => {
  const { state, dispatch } = Hook();
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}


2

import React, { useReducer, withContext } from 'react';
import { Hook } from './Hook';
export const Two = () => {
  const { state, dispatch } = Hook();
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}


3 Непосредственно сам hook

import React, { useReducer } from 'react';
export const
  Hook = () => {
    const initialState = {count: 0};

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

    const [state, dispatch] = useReducer(reducer, initialState);

    return { state,  dispatch};
  };


Сейчас, как и ожидается, каждый из компонентов работает автономно. Вопрос в следующем. Можно ли как то заставить 3 компонент (hook) стать общим stateм для двух остальных? То есть стать заменой redux?
Ссылка на код
https://codesandbox.io/s/lxvl2lzxom


https://reactjs.org/docs/hooks-reference.html#usec...
  • Вопрос задан
  • 402 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Пригласить эксперта
Ваш ответ на вопрос

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

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