У нас есть три компонента
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... 
Простой