Reduxigen

Reduxigen

Reduxigen is a ridiculously simple state management system. Managing state in Reduxigen entails only two concepts:

• State

• Functions

State is a plain JavaScript object.

Reduxigen functions update values in the state.*

Reduxigen is also ridiculously small. It's only ~250 loc.--2.1 kb compressed.

Robust

Reduxigen is built on top of Redux. If you've used Redux, many of the concepts in Reduxigen will be very familiar. However, you'll find using Reduxigen much simpler than Redux. You'll write less code. The code you write will be predictable. This will make you more efficient, and less prone to error. At the same time, you'll get all the benefits Redux has to offer.

* More accurately, Reduxigen functions create a new state with appropriately updated values.

To see an example of Reduxigen in action, you can view this example repository

To read about Reduxigen in depth, please consult the Reduxigen GitBook.

TOC

• Summary
• Setup
• Quick Start
• API
• Other Options

Summary

The Reduxigen API exposes a set of functions. There are four functions:

• update
• asyncUpdate
• action
• set

Setup

Install from NPM

If you don't have react and redux already installed, then you'll need to install them. The minimum install for this would be:

npm i react react-dom redux react-redux

If you need to have async operations in your app, also install redux-thunk.

If your app is already configured to work with react and redux, all you have to do is install Reduxigen. Reduxigen plays nicely with other Redux tools such as Redux Saga, or Redux Observable.

To install Reduxigen:

npm i reduxigen

Quick Start

Getting up and running with Reduxigen is easy.

Configure

1. Create a default state:

export default {
  test: ""
}

2. Create a store:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk"; // If you're using thunks
import { rootReducer } from "reduxigen";
import DEFAULT from "state";

export default createStore(rootReducer(DEFAULT), applyMiddleware(thunk));

Create Actions

import { set } from 'reduxigen';

// Note that the value "test" corresponds to the "test" field in the state object.
export const setTest = set("test");

Connect actions to your component

Import this action into your component, and connect it.

import React from 'react';
import {setTest} from './test-actions';
import {connect} from "react-redux";

export const Test = ({test, setTest}) => <button onClick={setTest}>{test}</button>;

const mapStateToProps = state => {test: state.test}

export default connect(mapStateToProps, {setTest})(Test);

API

For full details on the Reduxigen API, please consult the Reduxigen GitBook.