@sixgramwater/redux-lite

redux-lite

simple library for state management inspired by redux and react-redux

Install

npm install --save @sixgramwater/redux-lite

Usage

// store/counter.ts
import { fetch } from "../api";

const counterState = {
  count: 0,
}

// A single module named: counter
const counter = {
  state: counterState,
  reducers: {
    addCounter({ state, payload }) {
      return {
        ...state,
        count: state.count + payload,
      }
    }
  },
  effects: {
    asyncAddCounter({dispatch, state, payload}) {
      fetch(1000).then(value => {
        dispatch.counter.addCounter(payload);
      })  
    }
  }
}

// setup modules and invoke create()
const modules = { counter };
export const { useModule, dispatch, useSelector } = create(modules);


// App.jsx
import { useModule, dispatch } from './store';

const App = () => {
  // const counterState = useModule('counter');
  // const count = counterState.count;
  const count = useSelector('counter', state => state.count);
  const handleClick = () => {
    dispatch.counter.addCounter(1);
  }

  const handleAsyncClick = () => {
    dispatch.counter.asyncAddCounter(1);
  }
  return (
    <div>
      {count}
      <button onClick={handleClick}>increase</button>
      <button onClick={handleAsyncClick}>Async increase</button>
      
    </div>
  )
}

License

MIT © sixgramwater

---

This hook is created using create-react-hook.