React global reducer

A React global state using the context and hooks API, without any dependencies.

Usage

Create global Provider and hook

function reducer(state, action) {
  switch (action.type) {
    case 'inc':
      return state + 1;
    case 'dec':
      return state - 1;
    default:
      return state;
  }
}

const initialValue = 10;

export const [CounterProvider, useGlobalCounter] = createGlobalReducer(
  reducer,
  initialValue
);

Using Provider

import { CounterProvider } from './hooks';

export default () => (
  <CounterProvider>
    <App />
  </CounterProvider>
);

Using global hook

import { useGlobalCounter } from './hooks';

export default function Counter({ name }) {
  const [state, dispatch] = useGlobalCounter();

  const increment = useCallback(() => dispatch({ type: 'inc' }), [dispatch]);
  const decrement = useCallback(() => dispatch({ type: 'dec' }), [dispatch]);

  return (
    <div>
      <h2>{name}</h2>
      {state}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Contributing

Install

To install the project dependencies, run:

npm install

It installs the node_modules dependencies.

Testing

• To run all tests, use npm run test.
• To run the linter use, use npm run lint.

CI and release

• To do a release, use npm run release.

Git Commit Messages

• Use conventional commits.
• Use the present tense ("Add feature" not "Added feature").
• Use the imperative mood ("Move cursor to..." not "Moves cursor to...").
• Limit the first line to 50 characters or less.
• Reference issues and pull requests explicitly.

Contributors

• View Contributors