Why?

The idea is to reduce the amount of boilerplate code required to set up complex local state.

In vanilla react to use a reducer you would normally define:

• Action constants - const addAction = 'AddAction';
• Action creator - const add = (value: number) => {type: addAction, payload: value};
• Reducer - const reducer = (state, action) => { switch(action.type) ... };
• UseReducer - const [state, dispatch] = useReducer(initialState, reducer);

All just to have multiple mutations happen to the state with one action.

With React MicroDux all you have to do is define the initial state and a function for each mutation you wish to perform on the state.

Usage

useMicroDux() takes an initial state and an object of functions that modify the state. It returns an object that contains the state and a dispatch object with each action function.

Example

import * as React from 'react';
import { useMicroDux } from 'react-microdux';

const Component = () => {
  const dux = useMicroDux(
    // Initial State
    { a: 1 },
    // State update functions
    {
      Add: (state, payload: number) => ({
        ...state,
        a: state.a + payload,
      }),
      MinusOne: state => ({
        ...state,
        a: state.a - 1,
      }),
    },
  );

  return (
    <div>
      <h1>Test Dux Component</h1>
      <span>{dux.state.a}</span>
      <button onClick={() => dux.dispatch.Add(1)}>Increment</button>
      <button onClick={() => dux.dispatch.MinusOne()}>Decrement</button>
    </div>
  );
};