@bdlite-fe/react-context-mutation
v0.2.1-Alpha
Published
to replace redux,Provider value contain useActions which is to merge context state value and useActions return an immutable function collection called `actions`
Downloads
8
Readme
English | 中文
NOTE
react-context-mutation is a lighter and more convenient state manager designed for react applications. It aims to replace the Redux in react applications and solve the problems of only one Store in Redux and Non Pluggable state maintenance in the project.
Install
npm install @bdlite-fe/react-context-mutation --save
Usage
// ./App/context.js
import createAppContext from 'react-context-mutation';
import state from './state'; // initial state tree
import configReducer from './config-reducer'; // pre reduce config function
export default createAppContext(state, configReducer)
// ./App/index.js
import AppContext from './context'
import Header from './Header'
const { AppProvider, AppConsumer } = AppContext
export default function App() {
return (
<AppProvider>
<AppConsumer>
{({ context, useActions }) => (
<Layout>
<Header context={context} useActions={useActions} />
<Layout>
<Sider context={context} useActions={useActions} />
<Content>
<Router />
</Content>
</Layout>
</Layout>
)}
</AppConsumer>
</AppProvider>
)
}
// ./App/state.js
export default { // initial state tree
app: {},
header: {},
sider: {},
}
// ./App/config-reducer.js
export default function configReducer({ app = {}, header = {}, sider = {} }) { // pre reduce config function
return (state) => ({
app: mergeAppConfig(app, state.app),
sider: mergeSiderConfig(sider, state.sider),
header: mergeHeaderConfig(header, state.header),
})
}
// ./Header/index.js
import createActions from './actions';
export default function Header(props) {
const { context, useActions } = props;
const { menu, currentItem } = context.header;
const actions = useActions('header', createActions); // `header` is namespace, actions is immutable
const handleMenuChange = useCallback((currentItem) => {
actions.changeCurrent(currentItem)
}, [actions]); // actions is immutable
return (
<header>
<Menu menu={menu} currentItem={currentItem} onMenuChange={handleMenuChange} />
</header>
)
}
// ./Header/actions.js
export default (mutation, contextRef) => ({ // `mutation`and`contextRef` from closure
changeCurrent(currentItem) {
// you can fetch data hear
mutation.header(() => ({ currentItem }));
// await for fetch has done, mutation the header context value then
}
})
createAppContext export
export default is a factory function, receive state
tree and a predicted reducer
function, return <AppProvider>
and <AppConsumer>
.
createAppContext(state[, configReducer])
AppProvider
The provider receives a config attribute and make the custom config merge to the abstraction of business framework.
<AppProvider config={/* initial config inner state */}>...</AppProvider>
AppConsumer
The consumer component can subscribe to the change of context. This component allows you to subscribe to context in functional components. useActions return an immutable collection of actions used to change context value.
<AppConsumer>
{({ context, useActions, mutation }) => /* regular context to use */}
</AppConsumer>
Context
Context provides a way to share such values among components without explicitly passing props layer by layer through the component tree, in order to share the data that is "global" to a component tree.
<AppConsumer>
{({ context }) => // `context` contains the whole tree of state
<Header context={context} />
}}
</AppConsumer>
function Header(props) {
const { context } = props
const { menu } = context.header // get `header` namespace
return (
<header>
<Menu menu={menu} />
</header>
)
}
useActions
useActions is used to obtain the changes of update status in functional components. Accept a key of namespace and a closure funtion that provide mutation
and contextRef
.
const { useActions } = props
const actions = useActions(namespace, createActions)
Mutation
Mutation is used to update the status of components.
const { mutation } = props
mutation[namespace](reducer)