Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanxiaobei/retalk
๐ค The Simplest Redux
https://github.com/nanxiaobei/retalk
actions flux javascript react reducers redux retalk state
Last synced: 3 days ago
JSON representation
๐ค The Simplest Redux
- Host: GitHub
- URL: https://github.com/nanxiaobei/retalk
- Owner: nanxiaobei
- License: mit
- Created: 2018-06-09T06:18:31.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T18:23:03.000Z (4 months ago)
- Last Synced: 2025-01-01T06:02:11.446Z (10 days ago)
- Topics: actions, flux, javascript, react, reducers, redux, retalk, state
- Language: JavaScript
- Homepage:
- Size: 1.59 MB
- Stars: 187
- Watchers: 5
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - retalk
README
Link in bio to **widgets**,
your online **home screen**. โซ [๐ kee.so](https://kee.so/)
---
The Simplest Redux
[](https://travis-ci.org/nanxiaobei/retalk)
[](https://www.npmjs.com/package/retalk)
[](https://bundlephobia.com/result?p=retalk)
[](http://www.npmtrends.com/retalk)
[](https://github.com/nanxiaobei/retalk/blob/master/LICENSE)
English ยท [็ฎไฝไธญๆ](./README.zh-CN.md)
---
## Features
- **Simplest** - Same syntax as a class component
- **Only 2 API** - `setStore()` and `withStore()`
- **Async model** - Code splitting support for models
- **Auto loading** - Auto loading state for async actions
## Install
```sh
yarn add retalk
# npm i retalk
```
## Usage
Model syntax is like a React class component, just without lifecycle methods.
```jsx
import { Provider, setStore, withStore } from 'retalk';
// Setup model
class CounterModel {
state = {
count: 0,
};
add() {
const { count } = this.state; // get own state
this.setState({ count: ++count }); // set own state
this.addAsync(); // run own action
// this.models.someModel.state -> get another model's state
// this.models.someModel.someAction() -> run another model's action
}
async addAsync() {
await new Promise((resolve) => setTimeout(resolve, 1000));
const { count } = this.state;
this.setState({ count: ++count });
}
}
// Use in components
const Counter = withStore({
counter: ['count', 'add', 'addAsync'],
})((props) => {
const { count, add, addAsync } = props; // addAsync.loading can be use
return (
{count}
+
+ โณ{addAsync.loading && '...'}
);
});
// Setup store
const store = setStore({ counter: CounterModel });
const App = () => (
);
```
## Demo
[](https://codesandbox.io/s/retalk-5l9mqnzvx?fontsize=14&file=/src/Counter/Index.jsx)
## API
### 1. setStore()
`setStore(models, middleware)`
```js
const store = setStore(
{
home: HomeModel,
counter: CounterModel,
},
[logger, crashReporter]
);
```
Pass `models` and `middleware`(both are optional), Set up the one and only store.
In `development` mode, [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension) will be enabled by default, make sure its version [>= v2.15.3](https://github.com/reduxjs/redux/issues/2943) and [not v2.16.0](https://stackoverflow.com/a/53512072/6919133).
### 2. withStore()
`withStore(...modelNames)(Component)`
Eject state and actions of one or more models, to the props of a component. 3 ways to use it:
####
```js
// 1. Use string to eject all
const Wrapper = withStore('home', 'counter')(Counter);
// The simplest way, but unused props will also trigger re-render.
// Use this if all injected props will be used, or to rapid develop.
```
```js
// 2. Use object to customize
const Wrapper = withStore({
home: ['name', 'setName'],
counter: ['count', 'add', 'addAsync'],
})(Counter);
// Customize the injected props, only inject the needed props.
```
```js
// 3. Use `mapStateToProps()`... to customize more
const Wrapper = withStore(mapStateToProps, mapDispatchToProps)(Counter);
// For more customization of the injected props,
// use `mapStateToProps`, `mapDispatchToProps` etc.
// react-redux.js.org/api/connect
```
### 3. Provider & batch()
Just `redux-redux`'s [`Provider`](https://react-redux.js.org/api/provider) and [`batch()`](https://react-redux.js.org/api/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`](https://github.com/smooth-code/loadable-components/#loading-multiple-resources-in-parallel) to import components and models.
Then, use `store.add()` to eject models to store.
Here is an example with `loadable-components`:
```jsx harmony
import React from 'react';
import loadable from 'loadable-components';
const Wrapper = 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)` just like `setStore(models)`
return (props) => ;
});
```
## License
[MIT](https://github.com/nanxiaobei/retalk/blob/master/LICENSE) ยฉ [nanxiaobei](https://lee.so/)