1.0.0 • Published 5 years ago
@haoxh/redux-dva v1.0.0
redux-dva
安装
npm i -D @haoxh/redux-dva
使用
import React, { Component } from 'react';
import {createStore, combineReducers,applyMiddleware} from 'redux'
import {Provider} from './react-redux'
import reduxDva from '@haoxh/redux-dva'
import counter from './counter'
// dva.createReducers([counter]) 已数组的方式注册 model
const CombineReducers = combineReducers(
reduxDva.createReducers([counter])
)
// 注册 dva中间件
const middleware = applyMiddleware(reduxDva.middleware)
const store = createStore(CombineReducers,middleware)
/**
使用:
App.js
// ...
store.dispatch({
type:'counter/set',
payload:{counter:++counter}
callback:()=>{}
})
// ...
*/
class App extends Component {
render() {
return (
<Provider store={store} >
<App />
</Provider>
);
}
}
// counter.js
// 拥有 dva model 基本编程规则
export default {
namespace: 'counter',
state: {count:0},
effects: {
// 可使用 Generator,传入参数与 dva 基本一致
*set({payload, callback}, {call, put,select}) {
// 实现 put 方法,功能与dva 基本一致,可调用本 model 或 其他 namespace model 的 reducers 方法
// 实现 select 方法,与 dva 基本一致
// 实现 call 方法,与 dva 基本一致,提示:
// 需要兼容异步情况(只考虑 Promise 返回情况),利用 Generator next 方法实现
/**
支持语法:
let count = yield call(count,payload,1000)
let {
count,
someName
} = yield call({
count: call(count, payload, 1000),
someName: call(someFunc, payload)
})
let [count,someName] = yield call([
call(count,payload,1000),
call(someFunc,payload)
])
let [count,someName] = [
call(count,payload,1000),
call(someFunc,payload)
]
*/
const state = yield select((state)=> state)
console.log(state)
const data = yield call(count,payload)
yield put('setProps',data)
callback && callback()
}
},
reducers: {
// 与 dva 一致,这里直接 redux 中的 dispatch(中间件的 next 方法)
setProps(state,action){
return {...state,...action.payload}
}
}
}
function count(data,delay){
return new Promise((resolve,reject)=>{
return setTimeout(_=>{
resolve(data)
},delay)
})
}
1.0.0
5 years ago