dva = React-Router + Redux + Redux-saga
umi = React+dva
一. Redux：状态管理器 （vue 的vuex）
store: 仓库，用来存储 状态state
reducer: 是一个函数，该函数接收两个参数state和action，负责对状态进行同步管理
action: 是一个对象，且必须有一个属性type，该对象通过store.dispatch来触发，作为reducer接收的参数来实现对state的操作
subscribe :监听
1 Redux应用只能有一个store
2 getState()：获取state
3 dispatch(action)：更新state
Redux核心：
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
- 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
- 为了描述 action 如何改变 state tree ，你需要编写 reducers。
dispatch({
type: 'namespace/actionFuncName', //对应namespace. actionFuncName
payload: { // 传参
file: url[0].assignmentOwnerName,
},
callback: response => {
if (response.result === '1') {
message.success(response.msg);
this.mainSearch();
} else {
message.warning(response.msg);
}
},
});
二. react-redux
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
import { Provider,connect } from 'react-redux'
- UI组件 Provider(容器组件)：Provider的作⽤是从最外部封装了整个应⽤，并向connect模块传递store,在该组件里边的所有组件都可以使用 store，使 React 组件可被连接（connectable）
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
- connect：连接器，获取store数据 == 高阶组件HOC
connect(mapStateToProps,mapDispatchToProps)(UI组件)；
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps, //state 映射到 UI 组件的参数（props）
mapDispatchToProps //用户对 UI 组件的操作映射成 Action
)(TodoList)
class
export default VisibleTodoList
/接受 state 作为参数，返回一个对象
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
/mapDispatchToProps() 方法接收 dispatch() 方法,return期望注入到展示组件的 props 中的回调方法。
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
//连接的参数名必须是model的namespace
export default connect(({ Model_SecondExampleModel }) => ({
Model_SecondExampleModel,
}))(SecondExample);
高阶组件HOC
1.劫持渲染
2.增减props
3.代码复用
4. DVAJS 状态管理库 dva = React-Router + Redux + Redux-saga （重要）
核心概念：用户的交互或浏览器行为通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State，如果是异步行为（可以称为副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。
connect 就是 react-redux 的 connect
每个model中都包含6个api,分别是state,Action,dispatch reducer,effect Subscription
MODEL
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: {
// * genratei
*add(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'minus' });
},
*getListFromServicesEffects({ payload }, { call, put }){
//yield call(外部引入的方法名, 参数)，执行异步请求，阻塞流程。
const result:any = yield call(functionName,token,payload.value);
//执行🍌effects中的异步方法时🍌，🍌不阻塞流程🍌，和组件中使用dispatch执行effects方法一样；但在执行reducer中的状态更新方法时，会阻塞流程
yield put({
type: 'getListReducers',
payload: ['first'],
});
payload.callback('出来')//调用组件中的调用函数中的callback函数
},
},
subscriptions: {
keyboardWatcher({ dispatch }) {
key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
},
},
});
state type State = any
state表示model的状态数据，通常是一个JavaScript对象。
操作时候每次都要当做不可变数据对待，保证每次都是全新对象，没有引用关系，这样才能保证State的独立性
Action对象 type AsyncAction = any
是改变State的唯一途径，action 必须带有 type 属性指明具体的行为
(
{
type: 'click-submit-button',
payload: this.form.data
}
）
dispatch 函数 type dispatch = (a: Action) => Action
dispatch 函数是一个触发action函数，dispatch可以看成是触发这个歌行为的方式
<!-- -->
dispatch({
type: 'user/add', // 如果在 model 外调用，需要添加 namespace
payload: {}, // 需要传递的信息
});
Reducer 函数 type Reducer<S, A> = (state: S, action: A) => S
reducer函数接收两个参数，reducer来自函数式编程
Reducers 改变 State
Reducer:{
update(state,{playload}){
}
}
Effect
Effect 表示为副作用函数，在应用中最常见的就是异步操作。dva为了控制副作用的操作，底层是引用了redux-saga 做异步流程，由于采用了函数式编程（generator函数 *fn(){}），所以讲异步转换成同步，从而Effect转成纯函数
Subscription 订阅器（subscriptions）
Subscription 是一种从源获取数据的方法。它在函数被注册的时候调用
事件传递 dispatch action -state
State：一个对象，保存整个应用状态
View：React 组件构成的视图层
Action：一个对象，描述事件
connect 方法：一个函数，绑定 State 到 View
dispatch 方法：一个函数，发送 Action 到 State
