Hooks API react. Is it possible to replace state redux using useReducer?

Question

React

We have three components
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 itself

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};
  };

Now, as expected, each of the components works autonomously. The question is the following. Is it possible to somehow force 3 components (hook) to become a common state for the other two? That is, to become a replacement for redux?
Link to code

https://codesandbox.io/s/lxvl2lzxom

https://reactjs.org/docs/hooks-reference.html#usec...

Answer 1

So , right?