# redstore

> Syntactic sugar for `ngrx/store` reducer

Latest version **0.1.0** (published 2016-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install redstore
pnpm add redstore
yarn add redstore
bun add redstore
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2016-10-19 |
| First published | 2016-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Philipp Renoth |
| Maintainers | daaitch |
| Keywords | ngrx, redux, store |

## Links

- npm: https://www.npmjs.com/package/redstore
- Repository: https://github.com/DaAitch/redstore
- Homepage: https://github.com/DaAitch/redstore#readme
- Issues: https://github.com/DaAitch/redstore/issues
- npm.io page: https://npm.io/package/redstore

## Dependencies (2)

- [flatcopy](https://npm.io/package/flatcopy.md) ^1.0.0
- [nominate](https://npm.io/package/nominate.md) ^1.0.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2016-10-19

## README

# redstore (experimental)
Syntactic sugar for `ngrx/store` reducer.

`redstore` (*REDucerSTORE*) will helps you writing your action-creators and reducers compact
in just a few lines, integrated in `Angular2`'s dependency injection system.

## Example (*TodoList*)
It only takes 4 little steps:

1. **create your state structure**. We want a *TodoList*
where we can add and remove todos and give a name for the list.
    ```typescript
    export interface IState {
        name?: string;
        todos?: string[];
    }
    ```
2. **create your `Redstore`** which is action-creator and reducer in one class.
    ```typescript
    @Redstore()
    @Injectable()
    export class TodoListRedstore {

        @Action()
        addTodo(item: string) {
            return item;
        }

        @StateCopy()
        static addTodo(_state: IState, item: string) {
            const _todos = _state.todos = flatarraycopy(_state.todos);
            _todos.push(item);
        }

        @Action()
        removeTodo(index: number) {
            return index;
        }

        @StateCopy()
        static removeTodo(_state: IState, index: number) {
            const _todos = _state.todos = flatarraycopy(_state.todos);
            _todos.splice(index, 1);
        }

        // shortcut `set...` for a reducer copying state and setting `name`
        @Action()
        setName(name: string) {
            return name;
        }

        // can be skipped as this is the default reducer for `set...`-Actions
        // @StateCopy()
        // static setName(_state: IState, name: string) {
        //     _state.name = name
        // }
    }
    ```

3. **provide `ngrx/store` module** to your application ([also see here](https://github.com/ngrx/store#setup))
    ```typescript
    const storeModule = StoreModule.provideStore(
        getReducer(TodoListRedstore),
        {}
    );

    @NgModule({
      imports: [
        // ...
        storeModule
      ]
    })
    export class AppModule {}
    ```
4. **inject your `Redstore`-class** (e.g. `TodoListRedstore`) where
you want and use its methods to dispatch actions.
    ```typescript
    @Component({
        selector: 'myTodo',
        template: require('./todo.component.html')
    })
    export class TodoComponent {

        todos$: Observable<string[]>;

        constructor(
            private todoListRedstore: TodoListRedstore,
            private store: Store<IState>
        ) {
            this.todos$ = store.map((state: IState) => state.todos);
        }

        addTodo(item: string) {
            // automagically dispatches addTodo-action
            this.todoListRedstore.addTodo(item);
        }

        removeTodo(index: number) {
            // automagically dispatches removeTodo-action
            this.todoListRedstore.removeTodo(index);
        }

        setName(name: string) {
            // automagically dispatches setName-action
            this.todoListRedstore.setName(name);
        }
    }
    ```

## Ideas
1. no boilerplate code
    1. **no action-types** have to be defined by the developer.

        Type is per convention `<className>.<methodName>`.

    1. **no action-creators**, but only payloads.

        `@Action()` decorated methods only returns the payload.

    1. **no dispatch calls**.

        `@Action()` decorated methods magically dispatch the
        corresponding action.

    1. **no state copy and return code**, but `@StateCopy` decorator.

        `@StateCopy` decorated reducer getting a `flatcopy` of state
        as first parameter and shall not return it.

1. straight reducers
    1. **no switch blocks**, but invocation of reducers per convention.
    1. **directly testable**, because just static methods.
    1. **optional default reducers**, with name `setX` for
    `@Action` decorated methods per default adds a reducer setting `x`
    (lower camel-case for `X`) to the payload.

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