use-reduxer v1.1.0

useReduxer

Simple react hook based on useReducer and React Context to provide minimal API, similar to Redux!

PS. It's not ready for production, just fun and try react hooks :smile:

Installation

npm:

npm i use-reduxer

Yarn:

yarn add use-reduxer

API

Set reducers and initial state on top of your components tree:

import { Provider } from "use-reduxer";

render(
  <Provider reducers={reducers} initial={initialState}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Initial state object:

const initialState = {
  product: {
    list: []
  },
  user: {}
};

Reducers object could be structured like redux reducers:

const product = (state, action) => {
  switch (action.type) {
    case "add_product":
      return {
        ...state,
        list: [...state.list, action.data]
      };

    default:
      return state;
  }
};

const user = (state, action) => {
  switch (action.type) {
    case "set_user":
      const { name, email } = action;

      return {
        ...state,
        name,
        email
      };

    default:
      return state;
  }
};

const reducers = {
  product,
  user
};

Usage of useReduxer hook:

import { useReduxer } from "use-reduxer";

const Main = () => {
  const [state, dispatch] = useReduxer();

  return (
    <>
      <pre>{JSON.stringify(state)}</pre>

      <button
        onClick={() => {
          dispatch({
            type: "add_product",
            data: {
              name: "Product name",
              price: "$25"
            }
          });
        }}
      >
        Dispatch add_product!
      </button>
    </>
  );
};

Contributing

If you find a bug, please create an issue providing instructions to reproduce it. It's always very appreciable if you find the time to fix it. In this case, please submit a PR. Thank you for the code review and advice!

License

MIT © Bartłomiej Kuśmierczuk