redux-zero

redux-zero

A lightweight state container based on Redux

• Single store
• No reducers
• Less boilerplate
• No PropTypes
• Smaller and simpler than redux
• Written in TypeScript

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+ or TypeScript:

import { createStore, Provider, connect } from 'redux-zero'

CommonJS:

var createStore = require('redux-zero').createStore;
var Provider = require('redux-zero').Provider;
var connect = require('redux-zero').connect;

UMD:

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

Example

Let's make an increment/decrement simple application:

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 */
import store from "./store";

export const increment = () => {
  store.setState({
    count: store.getState().count + 1
  })
}

export const decrement = () => {
  store.setState({
    count: store.getState().count - 1
  })
}

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";

import { increment, decrement } from "./actions";

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

export default connect(mapToProps)(({ count }) => (
  <div>
    <h1>{count}</h1>
    <div>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</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";

import store from "./store";

import Counter from "./Counter";

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

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

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

Inspiration

redux-zero was based on this gist by @developit

Roadmap

• Remove PropTypes
• Improving integration with Preact
• Propertly use TypeScript

Docs

• Contributing
• Changelog
• Code of Conduct
• License

Changelog

1.1.0

• Removing PropTypes