- Simplest Redux: Just
stateandactions, clear than ever before. - Two API totally:
createStoreandwithStore, no more annoying concepts. - Async import model: Fully code splitting support for models.
- Auto
loadingstate: Send request, and loading state is ready to use.
yarn add retalknpm install retalkconst model = {
state: {
value: 0,
},
actions: {
add() {
const { value } = this.state; // this.state -> Get state
this.setState({ value: value + 1 }); // this.setState -> Set state
},
async asyncAdd() {
await new Promise((resolve) => setTimeout(resolve, 1000));
this.add(); // this[actionName] -> Call action
},
},
};
export default model;import { createStore } from 'retalk';
import demo from './demo/model';
const store = createStore({
demo,
});
export default store;import React from 'react';
import { connect } from 'react-redux';
import { withStore } from 'retalk';
const Demo = ({ value, add, asyncAdd, loading }) => (
<div>
<h4>Value: {value}</h4>
<button onClick={add}>+1</button>
<button onClick={asyncAdd}>Async +1 {loading.asyncAdd ? '...' : ''}</button>
</div>
);
// loading[asyncAction] -> Async action's loading status
export default connect(...withStore('demo'))(Demo);Well, only 3 steps, A simple Retalk demo is here. https://codesandbox.io/s/5l9mqnzvx
See more details in the documentation.
Retalk uses
Proxy, if old browsers not support, please try proxy-polyfill.
See what's new in the changelog.