Jahans3

const StateContent = createContext();

export function useStore () {
  const { state, dispatch } = useContext(StateContext);
  return [state, dispatch];
}

Jahans3

export function StateProvider ({ state: initialState, reducers, middleware, children }) {
  const [state, dispatch] = useReducer((state, action) => {
    return reducers.reduce((state, reducer) => reducer(state, action) || state, state);
  }, initialState);

  return (
    <StateContext.Provider value={{ state, dispatch }}>
      {children}
    </StateContext.Provider>
  );

Jahans3

import React, { useState } from 'react';

function Counter () {
  const [count, setCount] = useState(0);
  return (
    <>
      <span>
        Count: {count}
      </span>
      <button onClick={() => setCount(count + 1)}>

Jahans3

export class StateProvider extends React.PureComponent {
  static defaultProps = {
    state: {},
    reducers: [],
    middleware: []
  };

  state = this.props.state;

  _dispatch = action => {

Jahans3

export default function Root () {
  return (
    <StateProvider
      state={initialState}
      reducers={[countReducer]}
      middleware={[countMiddleware]}
    >
      <MyApp />
    </StateProvider>
  );

Jahans3

function countMiddleware ({ type, payload }, { count }) {
  if (type === ADD_N) {
    console.log(`${payload} + ${count} = ${payload + count}`);
    return null;
  }
}

Jahans3

export default function SomeCount () {
  return (
    <StateConsumer>
      {({ state, dispatch }) => (
        <>
          <p>
            Count: {state.count}
          </p>
          <button onClick={() => dispatch(addOne())}>
            + 1

Jahans3

export default function Root () {
  return (
    <StateProvider state={initialState} reducers={[countReducer]}>
      <MyApp />
    </StateProvider>
  );
}

Jahans3

function countReducer ({ count, ...state }, { type, payload }) {
  switch (type) {
    case ADD_N:
      return { ...state, count: count + payload };
    case ADD_ONE:
      return { ...state, count: count + 1 };
  }
}

Jahans3

export class Provider extends React.PureComponent {
  static defaultProps = {
    state: {},
    reducers: []
  };

  state = this.props.state;

  _dispatch = action => {
    const { reducers } = this.props;