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
To install the stable version:
npm install --save redux-zero
This assumes that you’re using npm with a module bundler like Webpack
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>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
Redux Zero was based on this gist by @developit
- Improve integration with Preact
- (try to) Remove the context API
- Add more use case examples (including unit tests)
