https://github.com/samhinton88/redux-juice

Simple utility to managed normalised business objects in redux state.
https://github.com/samhinton88/redux-juice

javascript redux state state-management

Last synced: 3 months ago
JSON representation

Simple utility to managed normalised business objects in redux state.

• Host: GitHub
• URL: https://github.com/samhinton88/redux-juice
• Owner: samhinton88
• Created: 2019-02-21T20:28:39.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-08T17:50:36.000Z (almost 6 years ago)
• Last Synced: 2024-10-28T22:14:54.693Z (4 months ago)
• Topics: javascript, redux, state, state-management
• Language: JavaScript
• Homepage:
• Size: 105 KB
• Stars: 3
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Redux-Juice

> A simple, lightweight utility for building normalised business objects in Redux state.

Given an object schema, `juice` returns two reducers: `byId` and `all`. 

`byId` is an object where resources are indexed by a unique id, `all` being an array of all resource ids of that type.

## Installation

```console

> npm install --save redux-juice

```

## Basic Usage

```js

import juice from 'redux-juice';

import { combineReducers } from 'redux';

const blogSchema = {

  title: String,

  content: String

};

const { byId, all } = juice(blogSchema, 'blog');

const userReducer = combineReducers({ byId, all });

```

The above will generate reducers which respond to type: `${resourceName}_${attributeName}_${action}`.

```js

dispatch({ type: BLOG_ADD, payload: { id:'uniqueID' } });

dispatch({ type: BLOG_REMOVE, payload: { id:'uniqueID' } });

dispatch({ type: BLOG_TITLE_UPDATE, payload: 'New Blog Title' });

```

## Reduction Functions

```js

const picSchema = {

  likeCount: { type: Number, func: 'INCREMENT', default: 0 },

}

```

Attributes can be assigned functions to describe transformations to be applied in reducer logic.

Juice comes with a number of built in functions which cover a range of commonly required transformations.

### Numbers

`INCREMENT`

`DECREMENT` 

### Arrays

`APPEND`

`PREPEND`

`REPLACE`

`REMOVE`

`INSERT`

### Boolean

`TOGGLE`

Actions should be constructed in the following pattern:

```js

{ type: TYPE, payload: { id: 'unique id', value: 'some value', index: 0 } }

```

`index` being relevant to actions which should change arrays.

## Custom Functions

Custom functions may also be used:

```js

import shuffle from 'lodash.shuffle';

const anagramSchema = {

  content: { type: String, func: { name: 'randomise', func: val => shuffle(val.split('')).join('') } }

};

```

Custom functions use the signature `(existingValue, incomingValue, index) => {return /* something immutable */}`

```js

const mirrorSchema = {

  reversibleStr: { type: String, func: { name: 'REVERSE', func: val => val.split('').reverse().join('') }}

}

const mirrorReducer = combineReducers(juice(mirrorSchema, 'mirror'));

```

Will allow: 

```js

dispatch({ type: 'MIRROR_REVERSIBLESTR_REVERSE', payload: { id: 'resourceId' } };

```