/redux-zero

A lightweight state container based on Redux

Primary LanguageTypeScriptMIT LicenseMIT

redux zero logo

A lightweight state container based on Redux

Read the intro blog post

build npm downloads license dependencies

Table of Contents

Installation

To install the stable version:

npm install --save redux-zero

This assumes that you’re using npm with a module bundler like webpack

How

ES2015+:

import createStore from "redux-zero"
import { Provider, connect } from "redux-zero/react"

TypeScript:

import * as createStore from "redux-zero"
import { Provider, connect } from "redux-zero/react"

CommonJS:

const createStore = require("redux-zero")
const { Provider, connect } = require("redux-zero/react")

UMD:

<script src="https://unpkg.com/redux-zero/dist/redux-zero.min.js"></script>
<script src="https://unpkg.com/redux-zero/react/index.min.js"></script>

Example

Let's make an increment/decrement simple application with React:

First, create your store. This is where your application state will live:

/* store.js */
import createStore from "redux-zero";

const initialState = { count: 1 };
const store = createStore(initialState);

export default store;

Then, create your actions. This is where you change the state from your store:

/* actions.js */
const actions = store => ({
  increment: state => ({ count: state.count + 1 }),
  decrement: state => ({ count: state.count - 1 })
});

export default actions;

By the way, because the actions are bound to the store, they are just pure functions :)

Now create your component. With Redux Zero your component can focus 100% on the UI and just call the actions that will automatically update the state:

/* Counter.js */
import React from "react";
import { connect } from "redux-zero/react";

import actions from "./actions";

const mapToProps = ({ count }) => ({ count });

export default connect(mapToProps, actions)(({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <div>
      <button onClick={decrement}>decrement</button>
      <button onClick={increment}>increment</button>
    </div>
  </div>
));

Last but not least, plug the whole thing in your index file:

/* index.js */
import React from "react";
import { render } from "react-dom";
import { Provider } from "redux-zero/react";

import store from "./store";

import Counter from "./Counter";

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

render(<App />, document.getElementById("root"));

Here's the full version: https://codesandbox.io/s/n5orzr5mxj

More examples

Middleware

The method signature for the middleware was inspired by redux. The main difference is that action is just a function:

/* store.js */
import createStore from "redux-zero";
import { applyMiddleware } from "redux-zero/middleware"

const logger = (store) => (next) => (action) => {
  console.log('current state', store.getState())
  return next(action);
}

const initialState = { count: 1 };
const middlewares = applyMiddleware(
  logger,
  anotherMiddleware
);

const store = createStore(initialState, middlewares);

export default store;

Inspiration

Redux Zero was based on this gist by @developit

Roadmap

  • Add more examples (including unit tests, SSR, etc)

Tools

These are unofficial tools, maintained by the community:

Docs