import * as React from 'react'
const { useContext, useReducer, createContext } = React
//一定要返回状态
function reducerInAction(state, action) {
if (typeof action.reducer == 'function') {
return action.reducer(state)
}
return state
}
//公用的数据处理
export default function createStore(params) {
const { initialState = {}, reducer
} = {
...params,
reducer: reducerInAction
}
//实际是由createContext所有状态版本的管理
const Appcontext = createContext()
const middleWareReducer = (lastState, action) => {
//更新数据
let netxState = reducer(lastState, action)
store._state = netxState
return netxState
}
const store = {
_state: initialState,
dispatch: undefined,
getState: () => {
return store._state
},
useContext: () => {
return useContext(Appcontext)
}
}
//数据包裹返回
const Provider = props => {
const [state, dispatch] = useReducer(middleWareReducer, initialState)
if (!store.dispatch) {
store.dispatch = async (action) => {
if (typeof action === 'function') {
await action(dispatch, store.getState())
} else {
dispatch(action)
}
}
}
return <Appcontext.Provider {...props} value={state} />
}
return {
Provider,
store
}
}
复制代码
引用案例
import * as React from 'react'
import HooksRedux from './HooksRedux'
const {
Provider,
store
} = HooksRedux({
initialState: { name: '微微', age: 0 }
})
const Home = () => {
const state = store.useContext()
return (
< div >
Home组件Age: {state.age}
<br />
<Button />
</div >
)
}
//同步请求
const actionOfAdd = () => {
return {
type: 'addCount',
reducer(state) {
return {
...state,
age: state.age + 1
}
}
}
}
function timeOutAdd(a) {
return new Promise(cb => setTimeout(() => cb(a - 1), 500))
}
//异步请求
const actionAsyncOfDelete = () => async (dispatch, ownState) => {
const age = await timeOutAdd(ownState.age)
dispatch({
type: 'addCount',
reducer(state) {
return {
...state,
age
}
}
})
}
//出发请求
const Button = () => {
function handleAdd() {
//返回给dispatch的是一个对象 store.dispatch(actionOfAdd())
}
function handleAsyncDelete() {
//返回给dispatch的是一个对象 store.dispatch(actionAsyncOfDelete())
}
return <>
<button onClick={handleAdd} >点击增加</button>
<button onClick={handleAsyncDelete} >点击异步减少</button>
</>
}
const WarpHome = () => {
return (
<Provider>
<Home />
</Provider>
)
}
export default WarpHome
复制代码