ht

hooks-tinysm

tiny state management for react with hooks

Showing:

Popularity

Downloads/wk

1

GitHub Stars

6

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

0

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

a simple state management for react using hooks

purpose

In some simple project, there are some state management requirement, but redux is too heavy to involve. then, this tiny tool is for you. And don't worry the rerender becouse of react contenxt render problem.

usage

npm install --save hooks-tinysm

getting start

let's start with a simple counter

step1: create a store.js file in root directory like blow:

import { createStore } from 'hooks-tinysm';
import { createStore } from 'hooks-tinysm';

const initialState = {
  count: 0,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_COUNT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'MINUS_COUNT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return {
        ...state
      };
  }
};

export default createStore(reducer, initialState);

step2: in your root App.js file, add some code like blow:

import React from 'react';
import { ContextProvider } from 'hooks-tinysm';
import store from './store';
import Counter from './Counter';
import './style.css';

export default function App() {
  return (
    <ContextProvider value={store}>
      <Counter />
    </ContextProvider>
  );
}

step3: in Counter.js file, wirite code like blow:

import React from 'react';
import { useDispatch, useSelector } from 'hooks-tinysm';

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);

  return (
    <div>
      <div>{count}</div>
      <button
        onClick={() => {
          dispatch({
            type: 'ADD_COUNT'
          });
        }}
      >
        add
      </button>
      <button
        onClick={() => {
          dispatch({
            type: 'MINUS_COUNT'
          });
        }}
      >
        minus
      </button>
    </div>
  );
};

export default Counter;

then, here you are, you finished this simple counter.

you can see the full code in stacklitz

what's more

This tool use Context in React, but use a EventEmitter to trigger react render rather than use the react context render. The value in ContextProvider is immutable and the ernder is triggerd by eventemitter. When dispatch execued, will notify all component which use useSelector, then in useSelect will do a compare, if not changed of the selected value, this component will not render.

By this way, people can use context without performance worries

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial