JSPM – redux-zero@4.6.0

Package Exports

redux-zero
redux-zero/preact
redux-zero/react

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

Installation
How
Example
Middleware
Inspiration
Roadmap
Tools
Docs

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

There is basic middleware support as of 4.6.0. The method signature for the middleware was inspired by redux. The main difference is that action is a function.

eg:

/* 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:

Redux-Zero Tools

redux-zero