# redux-dogma

> **A dogmatic and declarative redux store manager**

Latest version **0.4.0** (published 2020-07-02) · MIT license · 0 weekly downloads

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-07-02 |
| First published | 2019-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 104 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Devan Farrell |
| Maintainers | devanfarrell |

## Links

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

## Dependencies (6)

- [immer](https://npm.io/package/immer.md) ^7.0.5
- [redux](https://npm.io/package/redux.md) ^4.0.5
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3
- [redux-devtools-extension](https://npm.io/package/redux-devtools-extension.md) ^2.13.8
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.10.3
- [redux-immutable-state-invariant](https://npm.io/package/redux-immutable-state-invariant.md) ^2.1.0

## Recent versions

- 0.4.0 (latest) — 2020-07-02
- 0.3.0 — 2020-04-14
- 0.3.0-dev — 2020-03-14
- 0.2.3 — 2020-02-25
- 0.2.3-dev — 2020-02-24
- 0.2.2 — 2020-02-17
- 0.2.1-experimental — 2020-01-30
- 0.2.0-experimental — 2020-01-30
- 0.1.2 — 2019-12-24
- 0.1.1 — 2019-11-10
- 0.1.0 — 2019-11-08

## README

# Redux Dogma

**A dogmatic and declarative redux store manager**

![npm](https://img.shields.io/npm/dm/redux-dogma?style=flat) [![Maintainability](https://api.codeclimate.com/v1/badges/c0bca5d87dc8abcfe60a/maintainability)](https://codeclimate.com/github/devanfarrell/redux-dogma/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/c0bca5d87dc8abcfe60a/test_coverage)](https://codeclimate.com/github/devanfarrell/redux-dogma/test_coverage)

`npm install redux-dogma`

## Purpose

The **redux-dogma** project is a redux abstraction for rapid prototypes with a few goals in mind. First, is to have a strong typing abstraction for redux. All actions have typed payloads and reducer structures are propagated to the action handlers. The next goal is to ditch the `switch`. Low-level redux code makes following actions through code difficult, this is, in part, because reducers have to be mentally mapped to actions rather than being colocated. Finally, last goal was to remove as much boilerplate as possible.

This package is not a one size fits all solution to redux development. It comes built in with [redux-saga](https://www.npmjs.com/package/redux-saga) which is overkill for most applications.

## API Documentation

### Store Instantiation

```jsx
import * as React from 'react';
import { Provider } from 'react-redux';
import { createStoreAbstraction } from 'redux-dogma';

import { sliceExample } from './slices/sliceExample';

const store = createStoreAbstraction()
	.addSlice(sliceExample) // add all the created slices to the store
	.lockSideEffects() // call lockSideEffects once all slices have been added
	.getStore(); // getStore returns a store object from the abstraction

// If you're using redux add it to the provider as usual
const reduxProvider = ({ children }) => {
	return <Provider store={store}>{children}</Provider>;
};

export default reduxProvider;
```

### Reducer Instantiation

```ts
type DieState = 1 | 2 | 3 | 4 | 5 | 6;
const dieStates: DieState[] = [1, 2, 3, 4, 5, 6];

interface ReducerStructure {
	die1: DieState;
	die2: DieState;
	hasRolled: boolean;
}

export const diceSlice = createSlice<ReducerStructure>('dice', { die1: 1, die2: 1, hasRolled: false });
```

### Reducer Actions

Reducers use [immer](https://www.npmjs.com/package/immer) under the hood. There are pros and cons that come with this. Immutability is free out of the box but there isn't any way to opt out of immutability in this library. Also, because of this slices must be an object in order to maintain the proxy reference.

If you're using typescript, types are propagated from the slice creation and the createAction method call to action handler. If your action doesn't have a payload, use the `createSimpleAction` method.

```ts
export const rollDice = diceSlice.createSimpleAction('ROLL_DICE', (draft) => {
	const randomIndex1 = Math.round(Math.random() * 7776 - 1) % 6;
	const randomIndex2 = Math.round(Math.random() * 7776 - 1) % 6;
	draft.die1 = dieStates[randomIndex1];
	draft.die2 = dieStates[randomIndex2];
	draft.hasRolled = true;
});

interface CheatAction {
	die: 1 | 2;
	value: DieState;
}
export const cheat = diceSlice.createAction<CheatAction>('CHEAT', (draft, payload) => {
	if (payload.die === 1) {
		draft.die1 = payload.value;
	} else {
		draft.die2 = payload.value;
	}
});
```

### One Action to Many Slices

```ts
import { createAction } from 'redux-dogma';

export const resetDice = createAction('RESET_DICE');

// From dice slice
import { resetDice } from './sharedActions';

diceSlice.addAction(resetDice, (draft) => {
	draft.die1 = 1;
	draft.die2 = 1;
	draft.hasRolled = false;
});

// From other slice
exampleSlice.addAction(resetDice, (draft) => {
	draft.diceColorPreference = null;
});
```

### Side effects

Side effects use [redux-saga](https://www.npmjs.com/package/redux-saga).

```ts
import { effects } from 'redux-saga';

const tryToCheat = diceSlice.createSideEffect<DieState>("ATTEMPT_CHEAT", function(action)* {
  const succeed: boolean = !!!Math.round(Math.random());
  if(succeed) {
    yield effects.put(cheat(action.payload))
  } else {
    yield effects.put(rollDice());
  }
});
```

### Actions with reducers and side effects

```ts
export const changeNickName = createAction<{ nickName: string }>('CHANGE_NICKNAME');
slice.addAction(changeNickName, (draft, payload) => {
	state.nickName = payload;
});

slice.addSideEffect(changeNickName, function* (action) {
	const response = yield postChangeNickname(action.payload);
});
```

### Selectors

Selectors use the [reselect](https://www.npmjs.com/package/reselect) library. Type selection is also propagated from the slice.

```ts
import { createSelector } from 'reselect';
const rawSelector = diceSlice.selectState();
const redDie1 = createSelector([rawSelector], (state) => state.die1);
```

### Sub-slice Instantiation

```ts
import { createSlice } from 'redux-dogma';
import { diceSlice } from './diceSlice';
import { scoreSlice } from './scoreSlice';

export const sliceExample = createSlice('parentSliceExample').addSlice(stateSlice).addSlice(scoreSlice);
```

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