# @banbrick/react-utils

> react/redux utils for less boilerplate

Latest version **1.4.7** (published 2019-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @banbrick/react-utils
pnpm add @banbrick/react-utils
yarn add @banbrick/react-utils
bun add @banbrick/react-utils
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.7 |
| Published | 2019-03-01 |
| First published | 2019-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 25 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jiarong Gu |
| Maintainers | jiaronggu |
| Keywords | react, redux, utils |

## Links

- npm: https://www.npmjs.com/package/@banbrick/react-utils
- Repository: https://github.com/JiarongGu/banbrick-redux-utils
- Homepage: https://github.com/JiarongGu/banbrick-redux-utils#readme
- Issues: https://github.com/JiarongGu/banbrick-redux-utils/issues
- npm.io page: https://npm.io/package/@banbrick/react-utils

## Dependencies (13)

- [uuid](https://npm.io/package/uuid.md) ^3.*
- [axios](https://npm.io/package/axios.md) *
- [react](https://npm.io/package/react.md) *
- [redux](https://npm.io/package/redux.md) *
- [tslint](https://npm.io/package/tslint.md) ^5.12.1
- [typescript](https://npm.io/package/typescript.md) ^3.3.3
- [@types/node](https://npm.io/package/@types/node.md) ^11.9.4
- [react-redux](https://npm.io/package/react-redux.md) *
- [@types/redux](https://npm.io/package/@types/redux.md) ^3.6.0
- [react-router](https://npm.io/package/react-router.md) ^4.*
- [@types/history](https://npm.io/package/@types/history.md) ^4.7.2
- [@types/react-router](https://npm.io/package/@types/react-router.md) ^4.4.4
- [redux-devtools-extension](https://npm.io/package/redux-devtools-extension.md) *

## 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

- 1.4.7 (latest) — 2019-03-01
- 1.4.6 — 2019-02-27
- 1.4.5 — 2019-02-27
- 1.4.4 — 2019-02-25
- 1.4.3 — 2019-02-25
- 1.4.2 — 2019-02-25
- 1.4.1 — 2019-02-24
- 1.4.0 — 2019-02-24
- 1.3.3 — 2019-02-24
- 1.3.2 — 2019-02-24
- 1.3.1 — 2019-02-24
- 1.3.0 — 2019-02-24
- 1.2.0 — 2019-02-24
- 1.1.6 — 2019-02-23
- 1.1.5 — 2019-02-23
- … 7 more at https://npm.io/package/@banbrick/react-utils/versions

## README

# @banbrick/react-utils
for easier life on redux ``npm version 1.4.7``

## Getting Started

### Install
```npm i @banbrick/react-utils```

### Create store
this will create a store with registration ability

```
import { ConnectedRouter, configureStore } from '@banbrick/react-utils';
const store = configureStore<ApplicationState>({ reducers, initalState, middlewares, devTool: true });
```

### Setup Location Middleware
```
const locationMiddleware = { actionType: 'Location_Change_Action' };
const store = configureStore<ApplicationState>({ locationMiddleware, devTool: true });
```

#### Config formatter to convert payload to location for location middleware
```
locationFormatter: (payload) => payload.location;
const locationMiddleware = { actionType: 'Location_Change_Action', locationFormatter };
```


### Build redux
```
...
import { ReduxCreator } from '@banbrick/react-utils';

// build redux events, and get actions to tigger
const actions = new ReduxCreator<Number>('count', 0)
  .addReducer((state) => ++state, 'increment')
  .build();

@connect(
  state => ({ count: state.count }),
  dispatch => ({ increment: () => dispatch(actions.increment()) })
)
export class Counter extends React.Component<any> {
  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Current count: <strong>{this.props.count}</strong></p>
        <button onClick={this.props.increment}>Increment</button>
      </div>
    )
  }
}
```

### Advanced Usage
#### Effect handlers:  
using ``AddEffectHanlder`` from creator, add an async promise effect process, will return in action as well
  

#### location handlers:    
```
export class WatherForecastState {
  forecasts: any[];
}

const locationHanlder = async (store: Store<ApplicationState>, location: Location) => {
  var matches = matchPath(location.pathname,  { path: '/weather-forecast/:startDateIndex?'});

  if (matches) {
    const startDateIndex = (matches.params as any).startDateIndex;
    const httpConfig = store.getState().httpConfig.config;
    const forecasts = await new WeatherForecastSource(httpConfig).fetchdata(startDateIndex);

    store.dispatch(watherForecastActions.setForcasts(forecasts));
  }
};

export const watherForecastActions = 
  new ReduxCreator<WatherForecastState>('watherForecast', new WatherForecastState())
  .addReducer((state, forecasts) => ({ ...state, forecasts }), 'setForcasts')
  .addLocationHandler(locationHanlder)
  .build();
```

by adding location handler you can run actions based on location change, reqiure to use ``ConnctedRouter``
this will alloed you to call ``processLocationEvents`` to run location events explicitly

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