Skip to content

唐刀是一款基于 redux + redux-saga 以 model 为核心的数据流管理工具,它将 store 和 saga 统一为 model 的概念,写在一个 js 文件中,以对象配置的概念维护 state、 reducers、effects 等。

License

Notifications You must be signed in to change notification settings

MaoYanTech/tangdao

Repository files navigation

介绍

唐刀是一款基于 redux + redux-saga 以 model 为核心的数据流管理工具,它将 store 和 saga 统一为 model 的概念,写在一个 js 文件中,以对象配置的概念维护 state、 reducers、effects 等。

另外唐刀将 redux 相关常用的库整合在一起方便取用,具体如下:

  • react-router-dom
  • connected-react-router
  • react-redux
  • redux-saga
  • isomorphic-fetch

安装

npm install --save @maoyan/tangdao

简单实践

唐刀对于初始化的顺序有着严谨的顺序和规范,具体可看初始化顺序

我们通过创建一个简单计数应用来了解唐刀的正确开箱姿势。

第一步:创建实例

tangdao(opts) 可以用来配置应用的 reducer、saga、state 等一系列 redux + redux-saga 配置,具体细节可看初始化配置

// /index.js

import tangdao from '@maoyan/tangdao';

// 创建应用实例
const td = tangdao({});

第二步:创建 model

model 是管理 state、reducer、effect 的地方。我们将 action 分为两类,同步(reducer action)和异步(effect action)。

  • reducer action: 处理同步场景,是唯一可以修改 store state 的地方。

  • effect action: 处理异步场景,能够调用其他 action,不能修改 store state。

// /model/count.js

const count = {
  namespace: 'count',
  state: 0,
  reducers: {
    add(state, { payload }) {
      return state + payload;
    }
  }
  effects: {
    * asyncAdd({ payload }, { put }, actionCreator) {
      yield new Promise(resolve => setTimeout(resolve, 1000));
      yield put(actionCreator.add(payload));
    }
  }
}

export default count;

第三步:注册 model

将定义好的 model 对象交由唐刀进行注册。

// /index.js

import tangdao from '@maoyan/tangdao';
// 引入 count model
import countModel from './model/count.js';

// 创建应用实例
const td = tangdao({});

// 注册 model
td.model(countModel);

第四步:定义视图

唐刀将 redux 相关的库整合到了一起,例如 react-redux、react-router-dom、connected-react-router 等,方便直接取用。

// /pages/app.js

import React from 'react';
import { connect, dispatch } from '@maoyan/tangdao';

function App(props) {
  const { count } = props;
  return (
    <div>
      当前计数器为:{count}
      <button onClick={() => { dispatch.count.add(1); }}>increment</button>
      <button onClick={() => { dispatch.count.asyncAdd(1); }}>asyncAdd</button>
    </div>
  )
}

export default (history) => {
  connect(state => ({
    count: state.count
  }))(App)
};

第五步:注册视图

// /index.js

import tangdao from '@maoyan/tangdao';
// 引入 count model
import countModel from './model/count.js';

// 创建应用实例
const td = tangdao({});

// 注册 model
td.model(countModel);

// 注册视图
td.router(require('./pages/app.js').default);

第六步:启动应用

在这一步,唐刀将会依据创建实例的配置和注册的 model 创建 redux store 和 redux-saga,然后将视图挂载到目标 dom 节点上。

// /index.js

import tangdao from '@maoyan/tangdao';
// 引入 count model
import countModel from './model/count.js';

// 创建应用实例
const td = tangdao({});

// 注册 model
td.model(countModel);

// 注册视图
td.router(require('./pages/app.js').default);

// 启动应用
td.start('#app');

License

MIT

About

唐刀是一款基于 redux + redux-saga 以 model 为核心的数据流管理工具,它将 store 和 saga 统一为 model 的概念,写在一个 js 文件中,以对象配置的概念维护 state、 reducers、effects 等。

Resources

License

Stars

Watchers

Forks

Packages

No packages published