Retalk,最简单的 Redux 解决方案,可以更简单一点吗?
Retalk 3.0,现在 —— 像写 React 一样来写 Redux。
https://github.com/nanxiaobei/retalk
setStore()
、withStore()
、<Provider>
。yarn add retalk
或
npm install retalk
通常我们会在 app 内设置多个路由,一个路由对应一个 model,所以将会有多个 model。
像写一个 React 组件一样来写 model,只是没有了生命周期而已。
class CounterModel {
state = {
count: 0,
};
increment() {
// this.state -> 获取自身 model 的 state
// this.setState() -> 更新自身 model 的 state
// this.someAction() -> 调用自身 model 的 action
// this.models.someModel.state -> 获取其它 model 的 state
// this.models.someModel.someAction() -> 调用其它 model 的 action
const { count } = this.state;
this.setState({ count: count + 1 });
}
async incrementAsync() {
// 自动生成的 `someAsyncAction.loading` state 可供使用
await new Promise((resolve) => setTimeout(resolve, 1000));
this.increment();
}
}
使用 setStore()
来初始化所有 model 与其命名空间。
import { setStore } from 'retalk';
const store = setStore({
counter: CounterModel,
// 其它 model...
});
使用 withStore()
来连接 model 与组件。
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);
使用 <Provider>
来将 store 提供给 app。
import ReactDOM from 'react-dom';
import { Provider } from 'retalk';
const App = () => (
<Provider store={store}>
<CounterWrapper />
</Provider>
);
ReactDOM.render(<App />, document.getElementById('root'));
https://codesandbox.io/s/retalk-5l9mqnzvx?fontsize=14
1. setStore()
2. withStore()
3. <Provider>
查看文档:https://github.com/nanxiaobei/retalk/blob/master/README.zh-CN.md#api
1. 异步引入 model ?
2. 自定义 state 与 action ?
3. 支持热更新?
查看文档:https://github.com/nanxiaobei/retalk/blob/master/README.zh-CN.md#faq
如果你已经使用过 Retalk 2.0,可根据文档升级到 3.0,一切都非常简单。^_^
最简单的 Redux 开发体验,欢迎尝试:
https://github.com/nanxiaobei/retalk
定不负所望~ ⚡️
1
danube533 2019-11-11 16:43:11 +08:00 1
还以为螃蟹声卡发布新驱动了
|
3
nekolr 2019-11-11 18:36:49 +08:00 via Android
哈哈 不是一个人
|
4
cococoder 2019-11-12 10:35:37 +08:00
想知道除了简洁,跟 redux 的区别在哪,具体应用场景是否有不同
|
5
chairuosen 2019-11-12 11:56:23 +08:00
直接调 promise 方法,跟我们实践差不多,省了写 action 了。这个自动加 incrementAsync.loading 有意思
|
6
moonrailgun 2019-11-12 18:03:10 +08:00
想起了 dva。
|
7
shadeofgod 2019-11-14 11:16:21 +08:00
( 9012 年了怎么还没 hook api
|
8
nanxiaobei OP @cococoder 在 Redux 之上的封装,实现还是 Redux
|
9
nanxiaobei OP |
10
shadeofgod 2019-11-19 00:25:23 +08:00
@nanxiaobei 我的意思是这个基于 redux 的方案提供 hook api,看了下 withStore 都直接用的 react-redux 了,不如把它的 hook api 也搬过来。而且既然是基于 redux 的可以考虑下提供接口复用 redux 生态,比如可以使用 redux-persist 这类 middleware
|