Reduxigen

"[Redux] is hard... Integrating React and Redux is going to make [your] architecture more complicated." - Brian Holt

Reduxigen - Making powerful state management simple.

Reduxigen makes working with React and Redux ridiculously simple:

No action creators.
No reducers.
No mapStateToProps.
No mapDispatchToProps.

What is there?

functions that update your state, and
a powerful, simple connect method to bind React to Redux.

If you'd like to follow a step-by-step tutorial on getting started with Reduxigen, you can read this blog article: Super Simple React/Redux Apps with Reduxigen: Step by Step

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.

Summary

Reduxigen is a set of utilities: actions and connect.

Actions

Reduxigen actions simplify the process of updating Redux state. They eliminate the need to write all the boilerplate of reducers and action-creators.

Connect

Reduxigen connect simplifies connecting state and methods to props when using react-redux.

Use what you need

Each utility is its own file (reduxigen/actions and reduxigen/connect). You can load only the files you need. actions contains Reduxigen's central-reducer and all action methods. connect contains the simplified react-redux connect method.

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.

npm i reduxigen

Quick Start

Getting up and running with Reduxigen is easy.

Configure

Create a default state:

export default {
  test: ""
}

Create a store:

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

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

Create Actions

import { update } from 'reduxigen/actions';

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

Connect actions to your component

Import this action into your component, and connect it to redux, using Reduxigen's connect method, which simplifies mapping props and dispatch to state.

import React from 'react';
import * as actions from './test-actions';
import connect from "reduxigen/connect";

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

export default connect(['test'], actions)(Test);

Reduxigen's connect method will map the array of prop names you pass it to mapStateToProps. It will automatically map the actions you pass it to mapDispatchToProps.

API

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

Other Options

There are several libraries out there that work to simplify Redux. For more information on these options, please see the following Blog Article.

joe-crick / Reduxigen