All Projects β†’ redux-zero β†’ Redux Zero

redux-zero / Redux Zero

Licence: mit
A lightweight state container based on Redux

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Redux Zero

Tiny Atom
Pragmatic and concise state management.
Stars: ✭ 109 (-94.49%)
Mutual labels:  flux, functional, state, preact
Little State Machine
πŸ“  React custom hook for persist state management
Stars: ✭ 654 (-66.92%)
Mutual labels:  flux, state
Poi
⚑A zero-config bundler for JavaScript applications.
Stars: ✭ 5,291 (+167.63%)
Mutual labels:  svelte, preact
Bootstrap Cookie Alert
A simple, good looking cookie alert built for Bootstrap 3/4. No dependencies required.
Stars: ✭ 165 (-91.65%)
Mutual labels:  lightweight, small
Almin
Client-side DDD/CQRS for JavaScript.
Stars: ✭ 477 (-75.87%)
Mutual labels:  flux, state
Statty
A tiny and unobtrusive state management library for React and Preact apps
Stars: ✭ 516 (-73.9%)
Mutual labels:  state, preact
Alfa
Effortless React State Management.
Stars: ✭ 86 (-95.65%)
Mutual labels:  functional, state
react-wisteria
Managing the State with the Golden Path
Stars: ✭ 18 (-99.09%)
Mutual labels:  functional, state
Codesandbox Client
An online IDE for rapid web development
Stars: ✭ 11,122 (+462.57%)
Mutual labels:  svelte, preact
Arare
Lightweight curried functional programming library
Stars: ✭ 127 (-93.58%)
Mutual labels:  lightweight, functional
Wondercms
WonderCMS - fast and small flat file CMS (5 files)
Stars: ✭ 330 (-83.31%)
Mutual labels:  lightweight, small
Freactal
Clean and robust state management for React and React-like libs.
Stars: ✭ 1,676 (-15.23%)
Mutual labels:  state, preact
Unistore
🌢 350b / 650b state container with component actions for Preact & React
Stars: ✭ 2,850 (+44.16%)
Mutual labels:  state, preact
Reatom
State manager with a focus of all needs
Stars: ✭ 567 (-71.32%)
Mutual labels:  flux, state
StringDB
StringDB is a modular, key/value pair archival DB designed to consume *tiny* amounts of ram & produce *tiny* databases.
Stars: ✭ 56 (-97.17%)
Mutual labels:  lightweight, small
Svelte Store Router
Store-based router for Svelte
Stars: ✭ 54 (-97.27%)
Mutual labels:  state, svelte
stoxy
Stoxy is a state management API for all modern Web Technologies
Stars: ✭ 73 (-96.31%)
Mutual labels:  preact, state
advxml
A lightweight, simple and functional library DSL to work with XML in Scala with Cats
Stars: ✭ 54 (-97.27%)
Mutual labels:  lightweight, functional
Clean State
🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. πŸ‹
Stars: ✭ 107 (-94.59%)
Mutual labels:  flux, state
Tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Stars: ✭ 2,694 (+36.27%)
Mutual labels:  svelte, preact

redux zero logo

A lightweight state container based on Redux

Read the intro blog post


codacy build npm downloads license dependencies

Table of Contents

Installation

To install the stable version:

npm i 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:

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

<!-- for react -->
<script src="https://unpkg.com/redux-zero/react/index.min.js"></script>

<!-- for preact -->
<script src="https://unpkg.com/redux-zero/preact/index.min.js"></script>

<!-- for vue -->
<script src="https://unpkg.com/redux-zero/vue/index.min.js"></script>

<!-- for svelte -->
<script src="https://unpkg.com/redux-zero/svelte/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

By the way, you can also reset the state of the store anytime by simply doing this:

import store from "./store";

store.reset();

More examples

Actions

There are three gotchas with Redux Zero's actions:

  • Passing arguments
  • Combining actions
  • Binding actions outside your application scope

Passing arguments

Here's how you can pass arguments to actions:

const Component = ({ count, incrementOf }) => (
  <h1 onClick={() => incrementOf(10)}>{count}</h1>
);

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

const actions = store => ({
  incrementOf: (state, value) => ({ count: state.count + value })
});

const ConnectedComponent = connect(
  mapToProps,
  actions
)(Component);

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

Access props in actions

The initial component props are passed to the actions creator.

const Component = ({ count, increment }) => (
  <h1 onClick={() => increment()}>{count}</h1>
);

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

const actions = (store, ownProps) => ({
  increment: state => ({ count: state.count + ownProps.value })
});

const ConnectedComponent = connect(
  mapToProps,
  actions
)(Component);

const App = () => (
  <Provider store={store}>
    <ConnectedComponent value={10} />
  </Provider>
);

Combining actions

There's an utility function to combine actions on Redux Zero:

import { connect } from "redux-zero/react";
import { combineActions } from "redux-zero/utils";

import Component from "./Component";
import firstActions from "../../actions/firstActions";
import secondActions from "../../actions/secondActions";

export default connect(
  ({ params, moreParams }) => ({ params, moreParams }),
  combineActions(firstActions, secondActions)
)(Component);

Binding actions outside your application scope

If you need to bind the actions to an external listener outside the application scope, here's a simple way to do it:

On this example we listen to push notifications that sends data to our React Native app.

import firebase from "react-native-firebase";
import { bindActions } from "redux-zero/utils";
import store from "../store";
import actions from "../actions";

const messaging = firebase.messaging();
const boundActions = bindActions(actions, store);

messaging.onMessage(payload => {
  boundActions.saveMessage(payload);
});

Async

Async actions in Redux Zero are almost as simple as sync ones. Here's an example:

const mapActions = ({ setState }) => ({
  getTodos() {
    setState({ loading: true });

    return client
      .get("/todos")
      .then(payload => ({ payload, loading: false }))
      .catch(error => ({ error, loading: false }));
  }
});

They're still pure functions. You'll need to invoke setState if you have a loading status. But at the end, it's the same, just return whatever the updated state that you want.

And here's how easy it is to test this:

describe("todo actions", () => {
  let actions, store, listener, unsubscribe;
  beforeEach(() => {
    store = createStore();
    actions = getActions(store);
    listener = jest.fn();
    unsubscribe = store.subscribe(listener);
  });

  it("should fetch todos", () => {
    nock("http://someapi.com/")
      .get("/todos")
      .reply(200, { id: 1, title: "test stuff" });

    return actions.getTodos().then(() => {
      const [LOADING_STATE, SUCCESS_STATE] = listener.mock.calls.map(
        ([call]) => call
      );

      expect(LOADING_STATE.loading).toBe(true);
      expect(SUCCESS_STATE.payload).toEqual({ id: 1, title: "test stuff" });
      expect(SUCCESS_STATE.loading).toBe(false);
    });
  });
});

Middleware

The method signature for the middleware was inspired by redux. The main difference is that action is just a function:

/* store.js */
import createStore from "redux-zero";
import { applyMiddleware } from "redux-zero/middleware";

const logger = store => (next, args) => action => {
  console.log("current state", store.getState());
  console.log("action", action.name, ...args);
  return next(action);
};

const initialState = { count: 1 };
const middlewares = applyMiddleware(logger, anotherMiddleware);

const store = createStore(initialState, middlewares);

export default store;

DevTools

You can setup DevTools middleware in store.js to connect with Redux DevTools and inspect states in the store.

/* store.js */
import createStore from "redux-zero";
import { applyMiddleware } from "redux-zero/middleware";
import { connect } from "redux-zero/devtools";

const initialState = { count: 1 };
const middlewares = connect ? applyMiddleware(connect(initialState)) : [];
const store = createStore(initialState, middlewares);

export default store;

Also, these are unofficial tools, maintained by the community:

TypeScript

You can use the BoundActions type to write your React component props in a type safe way. Example:

import { BoundActions } from "redux-zero/types/Actions";

interface State {
  loading: boolean;
}

const actions = (store, ownProps) => ({
  setLoading: (state, loading: boolean) => ({ loading })
});

interface ComponentProps {
  value: string;
}

interface StoreProps {
  loading: boolean;
}

type Props = ComponentProps & StoreProps & BoundActions<State, typeof actions>

const Component = (props: Props) => (
  <h1 onClick={() => props.setLoading(!props.loading)}>{props.value}</h1>
);

const mapToProps = (state: State): StoreProps => ({ loading: state.loading });

const ConnectedComponent = connect<State, ComponentProps>(
  mapToProps,
  actions
)(Component);

const App = () => (
  <Provider store={store}>
    <ConnectedComponent value={10} />
  </Provider>
);

By doing this, TypeScript will know the available actions and their types available on the component's props. For example, you will get a compiler error if you call props.setLoding (that action doesn't exist), or if you call it with incorrect argument types, like props.setLoading(123).

Inspiration

Redux Zero was based on this gist by @developit

Roadmap

  • Make sure all bindings are working for latest versions of React, Vue, Preact and Svelte
  • Add time travel

Help is needed for both of these

Docs

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].