@menseb/react-context-reducer NPM

David David NPM NPM npm bundle size (scoped)

Installation

npm i @menseb/react-context-reducer

How it works

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 :

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 :

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 :

// 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.

How to use

Provider

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 (
        <Provider actions={actions} config={config} initial={initial}>
            {children}
        </Provider>
    );
}

Consumers

Consumer

import { Component } from 'react';
import { Consumer } from '@menseb/react-context-reducer';

export default class MyConsumer extends Component {
    render() {
        return (
            <Consumer>
                {({ dispatch, state }) => {
                    // Use dispatch and state
                }}
            </Consumer>
        );
    }
}

ConsumerState

import { Component } from 'react';
import { ConsumerState } from '@menseb/react-context-reducer';

export default class MyConsumerState extends Component {
    render() {
        return (
            <ConsumerState>
                {(state) => {
                    // Use state
                }}
            </ConsumerState>
        );
    }
}

ConsumerDispatch

import { Component } from 'react';
import { ConsumerDispatch } from '@menseb/react-context-reducer';

export default class MyConsumerDispatch extends Component {
    render() {
        return (
            <ConsumerDispatch>
                {(dispatch) => {
                    // Use dispatch
                }}
            </ConsumerDispatch>
        );
    }
}

Hooks

useContextReducer

import { useContextReducer } from '@menseb/react-context-reducer';

export default function MyHook() {
    const { dispatch, state } = useContextReducer();

    // Use dispatch and state

    return (...);
}

useContextState

import { useContextState } from '@menseb/react-context-reducer';

export default function MyHookState() {
    const state = useContextState();

    // Use state

    return (...);
}

useContextDispatch

import { useContextDispatch } from '@menseb/react-context-reducer';

export default function MyHookDispatch() {
    const dispatch = useContextDispatch();

    // Use dispatch

    return (...);
}