项目作者: ptol

项目描述 :
TypeScript strongly typed boilerplate-free reducer creator for Redux and ngrx
高级语言: TypeScript
项目地址: git://github.com/ptol/ts-reducer-creator.git
创建时间: 2018-07-28T08:57:47Z
项目社区:https://github.com/ptol/ts-reducer-creator

开源协议:MIT License

下载


Install

npm install ts-reducer-creator

How to use

First you need to define your actions and their payload types

  1. interface CounterActions {
  2. setValue: number; \\"setValue" is an action and number is a payload type
  3. increment: void;
  4. }

and State

  1. export interface State {
  2. value: number;
  3. }
  4. export const initialState: State = {
  5. value: 0
  6. }

Then you can call createHelpers

  1. import {createHelpers} from 'ts-reducer-creator';
  2. export const {reducer, actionCreators, ofTypeFilters, actionTypes} =
  3. createHelpers<State, CounterActions>('Counter', initialState, {
  4. increment: (state) => {
  5. return {...state, value: state.value + 1}; // state has type State
  6. },
  7. setValue: (state, payload) => {
  8. return {...state, value: payload}; // payload has type number
  9. },
  10. });

to create

  • reducer - your reducer function
  • actionCreators - action creators actionCreators.setValue(10)
  • ofTypeFilters - action filters for Obserable<Action>. 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

  1. export enum CounterActionTypes {
  2. INCREMENT = '[Counter] Increment',
  3. SET_VALUE = '[Counter] SetValue'
  4. }
  5. export class Increment implements Action {
  6. readonly type = CounterActionTypes.INCREMENT;
  7. }
  8. export class SetValue implements Action {
  9. readonly type = CounterActionTypes.SET_VALUE;
  10. constructor(public payload: number) {}
  11. }
  12. export type CounterActionsUnion = Increment | SetValue;
  13. export function reducer(state = initialState, action: CounterActionsUnion): State {
  14. switch (action.type) {
  15. case CounterActionTypes.INCREMENT: {
  16. return {...state, value: state.value + 1};
  17. }
  18. case CounterActionTypes.SET_VALUE: {
  19. return {value: action.payload};
  20. }
  21. default: {
  22. return state;
  23. }
  24. }
  25. }
  26. const actionCreators = {
  27. increment: () => new Increment(),
  28. setValue: (payload: number) => new SetValue(payload),
  29. }

ts-reducer-creator

  1. interface CounterActions {
  2. increment: void;
  3. setValue: number;
  4. }
  5. export const {reducer, actionCreators} = createHelpers<State, CounterActions>('Counter', initialState, {
  6. increment: (state) => {
  7. return {...state, value: state.value + 1};
  8. },
  9. setValue: (state, payload) => {
  10. return {...state, value: payload};
  11. }
  12. });

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