Retalk 3.0, the simplest Redux framework, is a little simpler

Retalk, the simplest Redux solution, could it be simpler?

Retalk 3.0, now — write Redux like React.

GitHub

Github.com/nanxiaobei/…

features

Minimalist Redux – Same syntax as the React component.
There are only three apis – setStore(),withStore(),<Provider>.
Asynchronous Model – Full support for code splitting for models.
Automatic loading – Automatically generates the loading state of asynchronous action.

The installation

yarn add retalk
Copy the code

npm install retalk
Copy the code

use

1. Models

Usually we will set up multiple routes in our app, one route for each model, so there will be multiple models.

Write the Model like a React component, but without the lifecycle.

class CounterModel {
  state = {
    count: 0}; increment() {// this. State -> get the state of your model
    // this.setState() -> Update the state of its model
    // this.someAction() -> call its own model action

    / / this. Models. SomeModel. State - > get the state of other model
    / / this. Models. SomeModel. SomeAction () - > call other action model

    const { count } = this.state;
    this.setState({ count: count + 1 });
  }
  async incrementAsync() {
    // Automatically generated 'someAsyncaction. loading' state is available

    await new Promise((resolve) = > setTimeout(resolve, 1000));
    this.increment(); }}Copy the code

2. Store

Use setStore() to initialize all models and their namespaces.

import { setStore } from 'retalk';

const store = setStore({
  counter: CounterModel,
  / / other model...
});
Copy the code

3. Views

Use withStore() to connect the Model to the component.

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

const Counter = ({ count, increment, incrementAsync }) = > (
  <div>
    <p>{count}</p>
    <button onClick={increment}>+</button>
    <button onClick={incrementAsync}>+ Async{incrementAsync.loading && '... '}</button>
  </div>
);

const CounterWrapper = withStore('counter')(Counter);
Copy the code

4. App

Use to provide the store to the app.

import ReactDOM from 'react-dom';
import { Provider } from 'retalk';

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

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

The sample

Codesandbox. IO/s/retalk – 5 l…

API

1. setStore()

2. withStore()

3. <Provider>

Learn more: github.com/nanxiaobei/…

FAQ

1. Introduce model asynchronously?

2. Customize state and Action?

3. Support hot updates?

Learn more: github.com/nanxiaobei/…

The upgrade was performed from V2 to V3

If you’ve already used Retalk 2.0, you can upgrade to 3.0 according to the documentation, and it’s all very simple. ^_^

Check out the documentation: github.com/nanxiaobei/…

The last

The simplest Redux development experience, please try: