@gtgalone/react-store
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

react-store Build Status

React Hook Store with useContext and useReducer for State Management. You don't have to use external libraries (redux, mobx, etc..)

  • Typescript support
  • Unopinionated
  • No dependencies
  • Tiny package size

Install

$ npm install @gtgalone/react-store
or
$ yarn add @gtgalone/react-store

Usage

Basic

import React from 'react';

import { StoreProvider, useStore } from '@gtgalone/react-store';
// or const { StoreProvider, useStore } = require('@gtgalone/react-store');

const App = () => {
  const { state, dispatchState } = useStore();

  console.log(state); // { count: 0 }

  const increment = () => {
    dispatchState({ name: 'count', value: state.count + 1 });
  };

  const decrement = () => {
    dispatchState({ name: 'count', value: state.count - 1 });
  };

  return (
    <div>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <div>{state.count}</div>
    </div>
  );
};

export default () => {
  return (
    <StoreProvider initialState={{ count: 0 }}>
      <App />
    </StoreProvider>
  );
};

To Avoid Re-rendering with Other states change

const App = () => {
  const { state, dispatchState } = useStore();

  const increment = () => {
    dispatchState({ name: 'count', value: state.count + 1 });
  };

  // return with useMemo.
  // Only Re-rendering with state.count change.
  return React.useMemo(() => (
    <div>
      <button onClick={increment}>increment</button>
      <div>{state.count}</div>
    </div>
  ), [state.count]);
};

With Custom Reducer

const actions = {
  INCREMENT: 'increment',
  DECREMENT: 'decrement',
  RESET: 'reset',
}

const App = () => {
  const { state, dispatch } = useStore();

  const increment = () => {
    dispatch({ type: actions.INCREMENT });
  };

  const decrement = () => {
    dispatch({ type: actions.DECREMENT });
  };

  const reset = () => {
    dispatch({ type: actions.RESET, payload: 0 });
  };

  return (
    <div>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
      <div>{state.count}</div>
    </div>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case actions.INCREMENT:
      return { count: state.count + 1 };
    case actions.DECREMENT:
      return { count: state.count - 1 };
    case actions.RESET:
      return { count: action.payload };
    default:
      throw new Error();
  }
};

export default () => {
  return (
    <StoreProvider reducer={reducer} initialState={{ count: 0 }}>
      <App />
    </StoreProvider>
  );
};

Return

state

States what you need to manage in your app globally.
Type: Object

dispatchState

Built in dispatch function with universial states.
It is easy and simple. You don't need to make any extra reducer.
Change single and multiple states with this function.
Type:
({ name: 'state name', value: 'any value' }) => void
([{ name: 'state name', value: 'any value' }]) => void

dispatch

You can use this function for custom reducer with action.
Type: ({ type: 'action name', payload: 'any value' }) => void
NOTE Allocated action: actions.SET_STATE


Recommend Libraries

Maintainer

License

MIT

Package Sidebar

Install

npm i @gtgalone/react-store

Weekly Downloads

3

Version

1.0.7

License

MIT

Unpacked Size

11.2 kB

Total Files

7

Last publish

Collaborators

  • gtgalone