How to use react-hooks-global-state - 9 common examples

count: countReducer,
  person: personReducer,
});

const logger = (
  { getState }: { getState: () => State },
) => (next: Dispatch) => (action: Action) => {
  /* eslint-disable no-console */
  console.log('will dispatch', action);
  const returnValue = next(action);
  console.log('state after dispatch', getState());
  /* eslint-enable no-console */
  return returnValue;
};

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
  reducer,
  initialState,
  applyMiddleware(logger),
);

preloadImages: 3, // 0 to 20
  qualityImage: 100
};

const initialState = {
  theme: getLSItem('theme') || 'light',
  language: 'es',
  displaySettings: displaySettingsLS || displaySettings,
  coreSettings: coreSettingsLS || coreSettings
};

const {
  GlobalStateProvider,
  setGlobalState,
  useGlobalState
} = createGlobalState(initialState);

export const setTheme = theme => {
  window.localStorage.setItem('theme', theme);
  setGlobalState('theme', theme);
};

export const setLanguage = language => {
  setGlobalState('language', language);
};

export const setDisplaySettings = displaySettings => {
  setLSItem('displaySettings', displaySettings);
  setGlobalState('displaySettings', displaySettings);
};

export const setCoreSettings = coreSettings => {

import { createStore } from 'react-hooks-global-state';

import { initialState, reducer } from './common';

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);

lastName: action.lastName,
    };
    case 'setAge': return {
      ...state,
      age: action.age,
    };
    default: return state;
  }
};

const reducer = combineReducers({
  count: countReducer,
  person: personReducer,
});

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(reduxThunk, reduxLogger),
    reduxDevToolsExt(),
  ),
);

import { createGlobalState, createStore } from 'react-hooks-global-state';
import { DefaultStore } from "./store";
import { Reducer } from './reducer';

const store = createStore(Reducer, DefaultStore);

export const
    useStore = store.useGlobalState;
export const
    StoreProvider = store.GlobalStateProvider;
export const { dispatch } = store;

age: action.age,
      },
    };
    default: return state;
  }
};

const saveStateToStorage = (
  { getState }: { getState: () => State },
) => (next: Dispatch) => (action: Action) => {
  const returnValue = next(action);
  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(getState()));
  return returnValue;
};

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
  reducer,
  initialState,
  applyMiddleware(saveStateToStorage),
);

import React, { useTransition } from 'react';
import { createStore } from 'react-hooks-global-state';

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  initialState,
  reducer,
  ids,
  useCheckTearing,
  shallowEqual,
} from '../common';

const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);

const Counter = React.memo(() => {
  const [count] = useGlobalState('count');
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);

const Main = () =&gt; {
  const [count] = useGlobalState('count');
  useCheckTearing();
  useRegisterIncrementDispatcher(React.useCallback(() =&gt; {
    dispatch({ type: 'increment' });
  }, []));
  const [localCount, localIncrement] = React.useReducer((c) =&gt; c + 1, 0);
  const normalIncrement = () =&gt; {
    dispatch({ type: 'increment' });

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';

import { createGlobalState } from 'react-hooks-global-state';

const initialState = {
  count: 0,
  text: 'hello',
};
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [value, update] = useGlobalState('count');
  return (
    <div>
      <span>Count: {value}</span>
      <button type="button"> update(value + 1)}&gt;+1</button>
      <button type="button"> update(value - 1)}&gt;-1</button>
    </div>
  );
};

const TextBox = () =&gt; {
  const [value, update] = useGlobalState('text');
  return (
    <div></div>

};
    default: return state;
  }
};

const reducer = combineReducers({
  count: countReducer,
  person: personReducer,
});

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(reduxThunk, reduxLogger),
    reduxDevToolsExt(),
  ),
);