Antd Pro key knowledge points

react+umi+dva+antd

umi

Umi is an extensible enterprise-level front-end application framework. It is based on routing and supports configuration routing and contract routing to ensure complete routing functions and extend functions.

Umi For details about route configurations, see umijs.org/zh-CN/docs/ official documents for on-demand loading and hot update

dva

Dva is introduced

Dva is a data flow scheme based on Redux and Redux-Saga. It organizes model through reducers, effects and Subscriptions. Dva manages the model of a domain through the concept of model. Contains reducers to update state synchronously, effects to handle asynchronous logic, and Subscriptions to data sources.

Dva provides the CONNECT method. If you’re familiar with Redux, this connect is the react-Redux connect. Connect the view to the model.

Dva Chinese document address: https://dvajs.com/guide/

The data flow

Data change is usually triggered by user interaction behavior or browser behavior (such as route jump, etc.). When such behavior will change data, an action can be initiated through Dispatch; if it is synchronous behavior, State can be directly changed through Reducers. If it is an asynchronous behavior (side effect) it will trigger Effects and then flow to Reducers and eventually change State.

case

app.model({ namespace: 'count', state: { record: 0, current: 0, }, reducers: { add(state) { const newCurrent = state.current + 1; return { ... state, record: newCurrent > state.record ? newCurrent : state.record, current: newCurrent, }; }, minus(state) { return { ... state, current: state.current - 1}; }, }, effects: { *add(action, { call, put }) { yield call(delay, 1000); yield put({ type: 'minus' }); }}, subscriptions: {keyboardWatcher ({beat} {key (' ⌘ + up and CTRL + up, () = > {dispatch ({type: 'add'})}); ,}}});Copy the code

Developing complex SPAs

By performing a select operation on one effect, you can obtain the state of the other effect and thus share the global effect. In an effect, multiple PUTS can be used to call reducer separately to update the state.

Put multiple items in an array to be executed in parallel, and when all is done, move on to the next section, something like promise.all.

const [result1, result2]  = yield all([
  call(service1, param1),
  call(service2, param2)
])
Copy the code