redux-model / Redux Model
Licence: mit
A redux framework for TS project.
Stars: ✭ 424
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Redux Model
Webpack React Router Redux Es6
webpack2+react+react-router+react-redux+ES6版本的CNode社区
Stars: ✭ 255 (-39.86%)
Mutual labels: react-redux
Django React Boilerplate
DIY Django + React Boilerplate for starting your SaaS
Stars: ✭ 385 (-9.2%)
Mutual labels: react-redux
Flag Project React
Awesome stack, awesome project pls press the star button
Stars: ✭ 278 (-34.43%)
Mutual labels: react-redux
React Crm
A reusable CRM project for real-world business based on React 16, Redux & Material-UI 4
Stars: ✭ 307 (-27.59%)
Mutual labels: react-redux
react-movies-finder
React Movies finder is a React app to search movies and series using redux, redux-thunk, React Hooks, and Material UI
Stars: ✭ 27 (-93.63%)
Mutual labels: react-redux
React Antd
基于react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd实现的SPA后台管理系统模板
Stars: ✭ 321 (-24.29%)
Mutual labels: react-redux
React Native Boilerplate
🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
Stars: ✭ 375 (-11.56%)
Mutual labels: react-redux
Whitestorm Typescript Boilerplate
📦 🚀 TypeScript boilerplate for WhitestormJS using react/redux ⚛
Stars: ✭ 285 (-32.78%)
Mutual labels: react-redux
Alduin
[DISCONTINUED] An RSS, Atom and JSON feed aggregator available on Windows and Linux.
Stars: ✭ 272 (-35.85%)
Mutual labels: react-redux
React Timeline Gantt
A react Timeline component with virtual rendering
Stars: ✭ 347 (-18.16%)
Mutual labels: react-redux
Youtube React
A Youtube clone built in React, Redux, Redux-saga
Stars: ✭ 421 (-0.71%)
Mutual labels: react-redux
Redux Model
Redux-Model是为了弥补原生Redux繁琐的开发流程,开发者重复劳动效率低下,模板文件导致代码量臃肿,以及因action和reducer文件分散造成代码追踪困难的问题而设计的。
特性
- 深度封装,模块化开发
- 使用mvvm快速处理reducer
- 👍真正意义上的Typescript框架,写起来比JS更流畅
- 内置http服务,请求action自带loading追踪、数据节流
- 支持React/Vue Hooks
- 支持数据持久化
- 支持Graphql请求
- 支持代码分离
安装
React 或 React-Native
npm install @redux-model/react
Taro
# taro 3+
npm install @redux-model/taro
# taro 2+
npm install @redux-model/[email protected] @tarojs/redux
# taro 1+
npm install @redux-model/[email protected] @tarojs/redux
Vue
# vue 3+
npm install @redux-model/vue
# vue 2+
npm install @redux-model/[email protected]
定义模型
interface Response {
id: number;
name: string;
}
interface Data {
counter: number;
users: Partial<{
[key: string]: Response;
}>;
}
class TestModel extends Model<Data> {
plus = this.action((state, step: number = 1) => {
state.counter += step;
});
getUser = $api.action((id: number) => {
return this
.get<Response>(`/api/users/${id}`)
.onSuccess((state, action) => {
state.users[id] = action.response;
});
});
protected initialState(): Data {
return {
counter: 0,
users: {},
};
}
}
export const testModel = new TestModel();
执行Action
testModel.plus();
testModel.plus(2);
testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});
在 Hooks 中获取数据
const data = testModel.useData(); // { counter: number, users: object }
const counter = testModel.useData((data) => data.counter); // number
const users = testModel.useData((data) => data.users); // object
const loading = testModel.getUser.useLoading(); // boolean
在 connect 中获取数据
type ReactProps = ReturnType<typeof mapStateToProps>;
const mapStateToProps = () => {
return {
counter: testModel.data.counter, // number
users: testModel.data.users, // object
loading: testModel.getUser.loading, // boolean
};
};
export default connect(mapStateToProps)(App);
在线运行示例
文档
请点击这里查看文档
本地开发
- git clone 你fork的仓库
- yarn install && yarn bootstrap
执行测试用例请使用 yarn test
修改在线文档请使用 yarn docs
欢迎使用并随时给我建议
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].