Retalk, Redux Never So Simple

Introduction

Simplest solution for Redux, write Redux like React.

Features

• Simplest Redux — Same syntax as a React component.
• Only 2 API — setStore() and withStore().
• Async models — Fully code splitting support for models.
• Auto loading — Auto loading state for async actions.

GitHub

https://github.com/nanxiaobei/retalk

Install

Yarn

yarn add retalk

npm

npm install retalk

Usage

1. Model

class CounterModel {
  state = {
    count: 0,
  };
  add() {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  }
  async addLater() {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    this.add();
  }
}

2. Store

import { setStore } from 'retalk';

const store = setStore({
  counter: CounterModel,
});

3. View

import React from 'react';
import { withStore } from 'retalk';

const Counter = ({ count, add, addLater }) => (
  <div>
    <p>{count}</p>
    <button onClick={add}>+</button>
    <button onClick={addLater}>+ ⏳{addLater.loading && '...'}</button>
  </div>
);

const CounterWrapper = withStore({
  counter: ['count', 'add', 'addLater'],
})(Counter);

Well, only 3 steps, A simple Retalk demo is here. https://codesandbox.io/s/5l9mqnzvx

Documentation

See more details in the GitHub README docs.