JSPM – redux-zero@2.1.1

Package Exports

redux-zero

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-zero) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A lightweight state container based on Redux

Read the intro blog post

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:

const { createStore, Provider, connect } = require('redux-zero');

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 store={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

Extract 'connect' so that Redux Zero can be used with multiple frameworks
Add more use case examples (including unit tests)

redux-zero