# redux-enhancer

> Automaticaly adds loading and error states to your API calls, and a reset store to each of yours Redux stores.

Latest version **1.1.1** (published 2018-01-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install redux-enhancer
pnpm add redux-enhancer
yarn add redux-enhancer
bun add redux-enhancer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-01-19 |
| First published | 2017-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Xavier Lefèvre |
| Maintainers | xavier-lefevre |
| Keywords | react, reactjs, react-native, redux, store, request, async, loading, error |

## Links

- npm: https://www.npmjs.com/package/redux-enhancer
- Repository: https://github.com/bamlab/redux-enhancer
- Homepage: https://github.com/bamlab/redux-enhancer#readme
- Issues: https://github.com/bamlab/redux-enhancer/issues
- npm.io page: https://npm.io/package/redux-enhancer

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [babel-preset-flow](https://npm.io/package/babel-preset-flow.md) ^6.23.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [babel-preset-stage-3](https://npm.io/package/babel-preset-stage-3.md) ^6.24.1

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2018-01-19
- 1.1.0 — 2017-11-09
- 1.0.1 — 2017-08-29
- 1.0.0 — 2017-08-29

## README

# Redux Enhancer

## What is it?
Tired of always copy pasting a lot of redux boilerplate everytime you create a new store, or handle an async action?
- Automaticaly generate the state of your async actions!
- Automaticaly generate reset store

## But in depth?

Enhance your redux modules:

![Async Call Redux Steps Schema](./documentation/async-call-redux-steps-schema.png)

- Automaticaly handling the start, loading, error or success, and reset Redux phases of your async calls
  - Four action types will be automaticaly created such as:
    ```javascript
    {
      REQUEST: {
        SIGNUP: {
          START: `USER.REQUEST.SIGNUP.START`,
          SUCCESS: `USER.REQUEST.SIGNUP.SUCCESS`,
          FAILED: `USER.REQUEST.SIGNUP.FAILED`,
          RESET: `USER.REQUEST.SIGNUP.RESET`,
        },
      },
    }
    ```
  - Two states will be automaticaly added such as:
    ```javascript
    {
      requests: {
        LOGIN: {
          loading: true,
          failed: false,
        },
      },
    }
    ```
  - Two selectors corresponding to the state will be automaticaly generated such as:
    ```javascript
    {
      signupLoading: (state) => state.user.requests.LOGIN.loading,
      signupFailed: (state) => state.user.requests.LOGIN.failed,
    }
    ```
- Adding a `RESET_STORE` action to your different stores re-initializing your stores to their `defaultState`
  - An action type and action creator are generated:
    ```javascript
    { RESET_STORE: 'RESET_STORE' }
    { resetStore: () => ({ type: 'RESET_STORE' }) }  
    ```
  - Your enhanced reducer will handle automaticaly your stores reset when dispatching the action

## How to use? [Full example here](./documentation/fullCodeExample.js)

1. In your redux module file(s) import the necessary enhancers:
  ```javascript
  import { enhanceActionTypes, enhanceActionCreators,
    enhanceDefaultState, enhanceReducer, enhanceSelectors } from 'redux-enhancer';
  ...
  ```

2. Create two variables, a string for the name of your store, an array of string in caps for your async calls:
  ```javascript
  ...
  const storeName = 'USER';
  const asyncActionsNames = ['SIGNUP'];
  ...
  ```

3. Enhance your action types by passing the `storeName` and `asyncActionsNames`:
  ```javascript
  ...
  const actionTypes = {
    ...enhanceActionTypes(storeName, asyncActionsNames),
    LOGOUT: 'LOGOUT',
  };
  ...
  ```

4. Enhance your action creators by passing the `storeName`, `apiActionsNames` and `actionTypes`:
  ```javascript
  ...
  const actionCreators = {
    ...enhanceActionCreators(storeName, asyncActionsNames, actionTypes),
    requestSignupStart: signupInfo => ({
      type: actionTypes.REQUEST.SIGNUP.START,
      payload: signupInfo,
    }),
  };
  ...
  ```

5. Enhance your default state by passing the `asyncActionsNames`:
  ```javascript
  ...
  const defaultState = {
    ...enhanceDefaultState(asyncActionsNames),
  };
  ...
  ```

6. Create your normal reducer and enhance it afterwards by passing the `storeName`:
  ```javascript
  ...
  const basicReducer = (state, action) => {
    switch (action.type) {
      case actionTypes.REQUEST.SIGNUP.SUCCESS:
        return {
          ...state,
          token: action.payload.token,
        };
      default:
        return state;
    }
  };

  const reducer = (state = defaultState, action) =>
    enhanceReducer(storeName, state, action, defaultState, basicReducer);
  ...
  ```

7. Enhance your selectors by passing the `storeName` and `asyncActionsNames`:
  ```javascript
  ...
  const selectors = {
    ...enhanceSelectors(storeName, asyncActionsNames),
    token: (state) => state.user.token,
  };
  ...
  ```

8. Use your newly generated actions and state inside your app:
  ```javascript
  // In a container?
  const mapStateToProps = (state) => ({
    signupLoading: selectors.signupLoading(state),
    signupFailed: selectors.signupFailed(state),
  });
  const mapDispatchToProps = {
    startSignup: actionCreators.startSignup,
    resetSignup: actionCreators.resetSignup,
  };

  // With a saga for instance
  function* signupSaga(action) {
    try {
      const { email, password, nickname } = action.payload;
      const { token } = yield call(api.signup, email, password, nickname);
      yield put({ type: actionTypes.REQUEST.SIGNUP.SUCCESS, payload: { token } });
    } catch (err) {
      yield put({ type: actionTypes.REQUEST.SIGNUP.FAILED, payload: { err } });
    }
  }
  ```

## Contributing

*To be filled*

## Todo

1. Rename the package to make it more explicit and less generic
2. Check the licence
3. Find a way to flow type the automaticaly created actions and selectors

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