api参考自https://github.com/rematch/rematch
name为必填选项
// model.js
export const model = {
name: 'model',
state: {
count: 0
},
reducers: {
increase (state, payload) {
return {
count: state.count + payload
}
},
decrease (state, payload) {
return {
count: state.count - payload
}
}
},
effects: {
async increaseAsync(payload, rootState) {
await new Promise(resolve => setTimeout(resolve, 1000))
this.increment(payload)
}
}
}
通过该方法去创建一个store，除了models参数，其他参数和redux中的createStore相同
// store.js
import { Provider } from 'react-redux'
import { Model } from './model'
import { createStore } from 'red-easy-redux'
let state = {
model: {
count: 5
}
}
const store = createStore({
models: [model],
state: state
})
export default store
可以使用dispatch去触发相应模块下的reducer和effect
import { dispatch } from 'red-easy-redux'
dispatch({type: '/model/increase', payload: 5}) // state: { model: { count: 5 } }
dispatch({type: '/model/decrease', payload: 3}) // state: { model: { count: 2 } }
dispatch({type: '/model/increaseAsync', payload: 1}) // state: { model: { count: 3 } } after delay
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import { dispatch } from 'red-easy-redux'
import store from './store'
const Count = props => (
<div>
The count is {props.count}
<button => {
dispatch({type: '/model/increase', payload: 1})
}}>increment</button>
<button => {
dispatch({type: '/model/increaseAsync', payload: 1})
}}>increaseAsync</button>
</div>
)
ReactDOM.render(
<Provider store={store}>
<CountContainer />
</Provider>,
document.getElementById('root')
更多功能等待以后更新... update in 2018.5.21