React Context Reducer
npm install @menseb/react-context-reducer
Use React context with the reducer pattern.
!David
!David
!NPM
!NPM
!npm bundle size (scoped)
* Installation
* How it works
* How to use
* Provider
* Consumers
* Consumer
* ConsumerState
* ConsumerDispatch
* Hooks
* useContextReducer
* useContextState
* useContextDispatch
* PropTypes
* Provider
* Consumers
* Hooks
* Scripts
* Code of conduct
* Liscence
``bash`
npm i @menseb/react-context-reducer
The main goal of this package was to avoid having to define your own reducer function using a javascript switch. Instead, it creates the reducer function using your own actions.
Each of your action should be a function which receives the current state and additional arguments and returns an updated state.
Example :
`javascript
export function myAction(state, arguments) {
const { bar } = state;
const { foo } = arguments;
return { ...state, bar: foo ? foo : bar };
}
`
You may also provide an initial state and a configuration function to give you more flexibility on your initial setup.
Example :
`javascript
export const initial = {
bar: false
};
export function config(initial) {
const { bar } = initial;
if (bar) return initial;
return { ...initial, bar: !bar };
}
`
This package will use the actions, the initial state and the configuration with the reducer hook from React, useReducer, to create the state and dispatch. Then, it will enhance the `dispatch` function by binding it to your actions names.
Example :
`javascript
// Instead of using dispatch this way
dispatch({ type: 'myAction', foo: true });
// You would use it this way
dispatch.myAction({ foo: true });
`
Finally, the `Provider` in this package will expose `dispatch` and `state`, which you can consume using the different ways below.
`jsx
import { Provider } from '@menseb/react-context-reducer';
import { config, initial } from 'path/to/utilities';
import * as actions from 'path/to/actions';
export default function MyProvider({ children }) {
return (
{children}
);
}
`
- #### Consumer
`jsx
import { Component } from 'react';
import { Consumer } from '@menseb/react-context-reducer';
export default class MyConsumer extends Component {
render() {
return (
{({ dispatch, state }) => {
// Use dispatch and state
}}
);
}
}
`
- #### ConsumerState
`jsx
import { Component } from 'react';
import { ConsumerState } from '@menseb/react-context-reducer';
export default class MyConsumerState extends Component {
render() {
return (
{(state) => {
// Use state
}}
);
}
}
`
- #### ConsumerDispatch
`jsx
import { Component } from 'react';
import { ConsumerDispatch } from '@menseb/react-context-reducer';
export default class MyConsumerDispatch extends Component {
render() {
return (
{(dispatch) => {
// Use dispatch
}}
);
}
}
`
- #### useContextReducer
`jsx
import { useContextReducer } from '@menseb/react-context-reducer';
export default function MyHook() {
const { dispatch, state } = useContextReducer();
// Use dispatch and state
return (...);
}
`
- #### useContextState
`jsx
import { useContextState } from '@menseb/react-context-reducer';
export default function MyHookState() {
const state = useContextState();
// Use state
return (...);
}
`
- #### useContextDispatch
`jsx
import { useContextDispatch } from '@menseb/react-context-reducer';
export default function MyHookDispatch() {
const dispatch = useContextDispatch();
// Use dispatch
return (...);
}
`
- #### Provider props
| property | type | required | default |
|----------|------|----------|---------|
| actions | Object of Function | true | none |
| children | React Node | true | none |
| config | Function | false | undefined |
| initial | Object | false | {} |
- #### Consumers props
| property | type | required | default |
|----------|------|----------|---------|
| children | Function | true | none |
- #### Hooks props
None, but you must follow the Rules of Hooks from React.
See scripts from the `package.json` file.
See code of conduct from the `CODE_OF_CONDUCT.md` file.
See license from the `LICENSE.md`` file.