【Q085】有没有用过其它状态管理器？以及原理

[kangyana]

mobx

[kangyana]

1. dva

dva 是一个基于 redux 和 redux-saga 的数据流方案。

为什么不使用 redux？

• 编辑成本高，需要在 reducer, saga, action 之间来回切换。
• 不便于组织业务模型 。比如写相似的业务页面，需要复制很多文件。
• saga 使用太复杂，每监听一个 action 都需要走 fork -> watcher -> worker 的流程。
• entry 使用麻烦。

dva 正是用于解决这些问题。

dva 原理

dva 是基于 redux + redux-saga 的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。

核心功能是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起，例如：

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

这对应使用 redux时，创建的 sagas/products.js, reducers/products.js 和 actions/products.js。

介绍下 model：

• namespace：对应 reducer 在 combine 到 rootReducer 时的 key 值。
• state：对应 reducer 的 initialState。
• subscription：事件监听器。
• effects：对应 saga，并简化了使用
• reducers