Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ptol/ts-reducer-creator
TypeScript strongly typed boilerplate-free reducer creator for Redux and ngrx
https://github.com/ptol/ts-reducer-creator
angular ngrx react redux
Last synced: 2 months ago
JSON representation
TypeScript strongly typed boilerplate-free reducer creator for Redux and ngrx
- Host: GitHub
- URL: https://github.com/ptol/ts-reducer-creator
- Owner: ptol
- License: mit
- Created: 2018-07-28T08:57:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-31T18:32:07.000Z (over 6 years ago)
- Last Synced: 2024-11-08T17:04:27.051Z (3 months ago)
- Topics: angular, ngrx, react, redux
- Language: TypeScript
- Homepage:
- Size: 258 KB
- Stars: 45
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Install
`npm install ts-reducer-creator`
# How to use
First you need to define your actions and their payload types
```typescript
interface CounterActions {
setValue: number; \\"setValue" is an action and number is a payload type
increment: void;
}
```
and State
```typescript
export interface State {
value: number;
}
export const initialState: State = {
value: 0
}
```
Then you can call `createHelpers`
```typescript
import {createHelpers} from 'ts-reducer-creator';
export const {reducer, actionCreators, ofTypeFilters, actionTypes} =
createHelpers('Counter', initialState, {
increment: (state) => {
return {...state, value: state.value + 1}; // state has type State
},
setValue: (state, payload) => {
return {...state, value: payload}; // payload has type number
},
});
```
to create
* **reducer** - your reducer function
* **actionCreators** - action creators `actionCreators.setValue(10)`
* **ofTypeFilters** - action filters for `Obserable`. It can be used with `redux-observable` or `ngrx effects` `actions$.pipe(ofTypeFilters.increment)`
* **actionTypes** - action types `actionTypes.increment`
# Boilerplate vs ts-reducer-creator
## Boilerplate
```typescript
export enum CounterActionTypes {
INCREMENT = '[Counter] Increment',
SET_VALUE = '[Counter] SetValue'
}
export class Increment implements Action {
readonly type = CounterActionTypes.INCREMENT;
}
export class SetValue implements Action {
readonly type = CounterActionTypes.SET_VALUE;
constructor(public payload: number) {}
}
export type CounterActionsUnion = Increment | SetValue;
export function reducer(state = initialState, action: CounterActionsUnion): State {
switch (action.type) {
case CounterActionTypes.INCREMENT: {
return {...state, value: state.value + 1};
}
case CounterActionTypes.SET_VALUE: {
return {value: action.payload};
}
default: {
return state;
}
}
}
const actionCreators = {
increment: () => new Increment(),
setValue: (payload: number) => new SetValue(payload),
}
```
## ts-reducer-creator
```typescript
interface CounterActions {
increment: void;
setValue: number;
}
export const {reducer, actionCreators} = createHelpers('Counter', initialState, {
increment: (state) => {
return {...state, value: state.value + 1};
},
setValue: (state, payload) => {
return {...state, value: payload};
}
});
```
# Examples
https://github.com/ptol/ts-reducer-creator/tree/master/examples
## Angular with ngrx
https://github.com/ptol/ts-reducer-creator/blob/master/examples/angular/src/app/newStore.ts
## React with redux and redux-observable
https://github.com/ptol/ts-reducer-creator/blob/master/examples/react/src/newStore.ts