JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2567
  • Score
    100M100P100Q128471F
  • License MIT

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

redux-zero

A lightweight state container based on Redux

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

build npm downloads license dependencies

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