# context-reducers

> Wrapper around React context that provides a flux like experience

Latest version **0.0.3** (published 2018-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install context-reducers
pnpm add context-reducers
yarn add context-reducers
bun add context-reducers
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-08-04 |
| First published | 2018-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Austin Willis |
| Maintainers | austinwillis |
| Keywords | react, context, state, redux |

## Links

- npm: https://www.npmjs.com/package/context-reducers
- Repository: https://github.com/austinwillis/context-reducers
- Homepage: https://github.com/austinwillis/context-flux-state#readme
- Issues: https://github.com/austinwillis/context-flux-state/issues
- npm.io page: https://npm.io/package/context-reducers

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2018-08-04
- 0.0.2 — 2018-08-04
- 0.0.1 — 2018-08-04

## README

# React Context Reducers

This library wraps the React context API to provide global state management. It adapts the idea of reducers from the flux architecture but forgoes the use of actions. Here the actions are the reducers and a dispatch function is provided through React context that allows state changes to be made.

## Install

Add the library with yarn
```
yarn add context-reducers
```

Or install with npm
```
npm i -D context-reducers
```

## Create Store

To use `context-reducers`, you will need to first create a store. This is done by providing an inital state to the `createDispatchContext` function.

```
import createDispatchContext from 'context-reducers'

const initialState = {
    open: false,
    text: '',
    data: [],
    loadingData: false
}

export default createDispatchContext(initialState);
```

The result of `createFluxContext` is a store object that has a Provider and Consumer that utilize React context.

## Provide Store

Import the store you created and use the `ContextContainer` to provide the store to child components.

```
import Store from './createStore';

export default class StoreProvider extends Component {
  render() {
    return (
        <Store.ContextContainer>
            {this.props.children}
        </Store.ContextContainer>
    );
  }
}
```

## Using the Store

The `ContextConsumer` property of the store is used to access store values.

```
import Store from './createStore';

export default class Child extends Component {
    render() {
      return <Store.ContextConsumer>
        {({ store: { text } }) => <p>{text}</p>}
      </Store.ContextConsumer>
    }
}
```

## Actions

Actions are used to update the store. Each action is a function that receives state, payload and dispatch as arguments and returns a new state.

A simple action that updates the state look like this.

```
export function open({ open, ...res }, payload, dispatch) {
    return {
        ...res,
        open: !open
    }
}
```

## Updating the Store

Actions are used to update the store by importing them and passing them to the store's `dispatch` property.

```
import Store from './createStore';
import { open } from './actions';

export default class Child extends Component {
    render() {
        return <Store.ContextConsumer>
          {({ dispatch }) => <button onClick={dispatch(open)}>Toggle</button>}
        </Store.ContextConsumer>
    }
}
```

## Async Updates

Actions that need to perform asyncronous updates can be done using async functions.

```
export async function getData(state) {
    const d = await fetchData();
    return currentState => ({
        ...currentState,
        data: d,
        loadingData: false
    });
}
```

The return value of an asynchronous funtion should be a function that receives the current state as an argument. This is necessary to make sure that once a promise resolves, the state updates can be made without wiping out interim updates.

## Dispatch Multiple Actions

When you need to trigger multiple actions, it can be done using the dispatch argument passed into an action.

```
function setLoading(state) {
    return ({
        ...state, loadingData: true
    })
}

export async function getData(state, _, dispatch) {
    dispatch(setLoading)
    const d = await fetchData();
    return currentState => ({
        ...currentState,
        data: d,
        loadingData: false
    });
}
```

You can also trigger multiple actions by calling dispatch with multiple arguments.

```
import Store from './createStore';
import { setLoading, getData } from './actions';

export default class Child extends Component {
    render() {
        return <Store.ContextConsumer>
          {({ dispatch }) => <button onClick={dispatch(setLoading, getData)}>Toggle</button>}
        </Store.ContextConsumer>
    }
}
```

---
_Source: https://npm.io/package/context-reducers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._