react dva 碎片02

dva 是基於現有應用架構 (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何新概念，全部代碼不到 100 行。( Inspired by elm and choo. )

dva 是 framework，不是 library，類似 emberjs，會很明確地告訴你每個部件應該怎麼寫，這對於團隊而言，會更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封裝了所有其他依賴。

DVA一共有5個API

import dva, { connect } from 'dva';

// 1. Create app
const app = dva();

// 2. Add plugins (optionally)
app.use(plugin);

// 3. Register models
app.model(model);

// 4. Connect components and models
const App = connect(mapStateToProps)(Component);

// 5. Config router with Components
app.router(routes);

// 6. Start app
app.start('#root');

API

1. app = dva(opts)

新建一個dva app，你可以配置history和initialState選項。

• opts.history: the history for router, default: hashHistory

• opts.initialState: initialState of the app, default: {}

import { browserHistory } from 'dva/router';
const app = dva({ 
  history: browserHistory,
});

2. app.use(hooks)

• onError(fn): called when an effect or subscription emit an error
• onAction(array|fn): called when an action is dispatched, used for registering redux middleware, support Arrayfor convenience
• onStateChange(fn): called after a reducer changes the state
• onReducer(fn): used for apply reducer enhancer
• onEffect(fn): used for wrapping effect to add custom behavior, e.g. dva-loading for automatical loading state
• onHmr(fn): used for hot module replacement
• extraReducers(object): used for adding extra reducers, e.g. redux-form needs extra form reducer

3. app.model(obj)

• namespace：model的名稱空間
• state：初始state
• reducers：同步的修改狀態的操作，由actions觸發(state, action) => state
• effects：異步的操作，並不直接修改state，由actions觸發，也可以調用actions。(action, { put, call, select })
• subscriptions：異步的只讀操作，並不直接修改state，可以調用actions。({ dispatch, history })

put(action)和dispatch(action)
這裏effects中的put(action)等同於subscriptions中的dispatch(action)，它們的作用都是分發一個action。

yield put({ type: actionType, payload: attachedData, error: errorIfHave});
dispatch({ type: actionType, payload: attachedData, error: errorIfHave});

call(asyncFunction)
調用一個異步函數

const result = yield call(api.fetch, { page: 1 });

select(function)
從全局狀態中選擇數據

const count = yield select(state => state.count);

4. app.router(({ history }) => routes)

import { Router, Route } from 'dva/routes';
app.router(({ history } => ({
  <Router history={ history }>
    <Route path="/" component={App} />
  </Router>
});

5. app.start(selector?)

啓動應用，selector是可選的。如果沒有selector參數，它會返回一個函數，這個函數返回JSX元素。

https://github.com/dvajs/dva