Step 1: Create a Provider
import { createProvider, combineReducers } from 'eox';
const initState = {
a: 1,
b: 100,
}
const reducers = combineReducers({
a: (state, action) => {
const { type, data } = action
switch (type) {
case 'addA':
return state + 1;
default:
return state;
}
},
b: (state, action) => {
const { type, data } = action
switch (type) {
case 'addB':
return state + 1;
default:
return state;
}
},
})
const { Provider, Context } = createProvider(reducers, initState);
export {
Provider,
Context,
}
Step 2: Wrap your App with the Provider
import React from 'react';
import { Provider } from 'context.js'
const App = () => {
return (
<Provider>
<Child />
</Provider>
)
}
Step 3: Useing Context by withContext
import React, { useContext } from 'react';
import { withContext } from 'eox';
import { Context } from 'context.js';
const Child = ({ dispatch, counta }) => {
return (
<div>
a:{counta}
<button onClick={()=>dispatch({ type: 'addA' })}>add a</button>
</div>
)
}
export default withContext(Child,Context,{
dispatch: ctx => ctx.dispatch,
counta: ctx => ctx.state.a,
})