The retalk from mitcns

The simplest solution for Redux.

Why

Simplest Redux - Same syntax as React components.
Only 2 APIs - setStore() and withStore().
Async models - Fully code splitting support for models.
Auto loading - Auto loading state for async actions.

Install

yarn add retalk

# or

npm install retalk

Usage

1. Model

Usually we'll set several routes in our app, one route with one model, so we'll have several models.

Write the model like a React component, just without the lifecycle methods.

class CounterModel {
  state = {
    count: 0,
  };
  add() {
    // this.state -> Get state of own model
    // this.setState() -> Set state of own model
    // this.someAction() -> Call actions of own model

    // this.models.someModel.state -> Get state of other models
    // this.models.someModel.someAction() -> Call actions of other models

    const { count } = this.state;
    this.setState({ count: count + 1 });
  }
  async addLater() {
    // Auto `someAsyncAction.loading` state can be use

    await new Promise((resolve) => setTimeout(resolve, 1000));
    this.add();
  }
}

2. Store

Use setStore() to set up all models with theirs namespaces.

import { setStore } from 'retalk';

const store = setStore({
  counter: CounterModel,
  // Other models...
});

3. View

Use withStore() to connect models and components.

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);

4. App

Use <Provider> to provide the store to your app.

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

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

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

Demo

API

1. setStore()

const store = setStore(models, middleware);

Pass models and middleware(both are optional), Setup the one and only store.

In development mode, Redux DevTools will be enabled by default, make sure its version >= v2.15.3 and not v2.16.0.

const store = setStore(
  {
    home: HomeModel,
    counter: CounterModel,
  },
  [logger, crashReporter]
);

2. withStore()

withStore(...modelNames)(Component)

Eject one or more models' state and actions to a component's props.

There are 3 ways to use it:

Use string to eject all

const CounterWrapper = withStore('home', 'counter')(Counter);

The Simplest way, but if some unused props are injected, it will also trigger a re-render.

This method can be used if determined that all injected props will be used, or to rapid develop.

Use object to customize

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

Customize the injected props, only inject the needed props, so to optimize the performance.

Use `mapStateToProps()`... to customize more

const CounterWrapper = withStore(mapStateToProps, mapDispatchToProps)(Counter);

For more customization of the injected props, you can use mapStateToProps, mapDispatchToProps etc.

At that time, withStore() will be used as connect().

3. Provider & batch()

Just redux-redux's Provider and batch().

You can import them from retalk to simplify development.

FAQ

Async import models?

Setup the store with setStore(), then use libs like loadable-components to import components and models.

Then, use store.add() to eject models to store.

Here is an example with loadable-components:

import React from 'react';
import loadable from 'loadable-components';

const AsyncCounter = loadable(async () => {
  const [{ default: Counter }, { default: CounterModel }] = await Promise.all([
    import('./Counter/index.jsx'),
    import('./Counter/Model.js'),
  ]);
  store.add({ counter: CounterModel }); // Use `store.add(models)`, like `setStore(models)`
  return (props) => <Counter {...props} />;
});

mitcns / retalk Goto Github PK

retalk's Introduction

Why

Install

Usage

1. Model

2. Store

3. View

4. App

Demo

API

1. setStore()

2. withStore()

Use string to eject all

Use object to customize

Use mapStateToProps()... to customize more

3. Provider & batch()

FAQ

Async import models?

License

retalk's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org

Use `mapStateToProps()`... to customize more