- Notifications
You must be signed in to change notification settings - Fork6
mizchi/hard-reducer
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Type friendly facade for better reducer.
npm install hard-reducer --save# oryarn add hard-reducer- Type safe interface
- Avoid redundant
typestring definitions - Keep reducer interface
(State, Action) => Stateto use withredux.combineReducers() - Handle Flux Standard Action
<Payload>{ type: string, payload: Payload }
Check this code to know detail.
This code is runnable in both flowtype and typescript
/*@flow */// ^ flow magic comment to activate. It will be ignored in typescript.import{buildActionCreator,createReducer,typeActionCreator}from"hard-reducer";// ^ If you use typescript, Do not use `type` before ActionCreatorconst{ createAction}=buildActionCreator({prefix:"counter/"});// Add type to your payload by ActionCreatorconstinc:ActionCreator<number> = createAction("inc");// or infer by function resultconst dec = createAction("dec", (val: number) =>val);inc(1);//=> { type: 'counter/inc', payload: 1 }// Define state typetypeState={value:number};constinitialState:State={value:0};constreducer=createReducer(initialState)// Handle `(State, Payload) => State` in matched context..case(inc,(state,payload)=>{return{value:state.value+payload};}).case(dec,(state,payload)=>{// $ExpectErrorconstp:string=payload;return{value:state.value-payload};})// Take string.case("other/noop",(state,payload)=>{returnstate;})// Take all uncaught action, not payload!.else((state,action)=>{console.log("default fallback");returnstate;});// Use itconstret0=reducer(initialState,inc(3));constret1=reducer(ret1,dec(1));
See detail inindex.js.flow orindex.d.ts
createAsyncAction(...) returns{ resolved, rejected, started } and callable method.
(You need to addredux-thunk in store's middlewares)
/*@flow */import{createReducer,buildActionCreator}from"hard-reducer";const{ createAsyncAction}=buildActionCreator();constincAsync=createAsyncAction("inc-async",async(val:number)=>{if(val%2===1){thrownewError("error");}return{p:1};});typeStatus="ready"|"started"|"resolved"|"rejected";typeState={status:Status,payload: ?{p:number}};constreducer=createReducer({status:"ready",payload:null}).case(incAsync.started,state=>{return{state:"started"};}).case(incAsync.resolved,(state,payload)=>{return{state:"resolve", payload};}).case(incAsync.rejected,(state,error)=>{return{state:"ready",payload:null};});// storeimportreduxThunkfrom"redux-thunk";import{applyMiddleware,createStore}from"redux";conststore=createStore(reducer,undefined,applyMiddleware(reduxThunk));store.subscribe((...args)=>{console.log("store",store.getState());});// dispatchstore.dispatch(incAsync(1));
createThunkAction(...) returns{ resolved, rejected, started } and callable method.
(You need to addredux-thunk in store's middlewares)
import{createReducer,buildActionCreator}from"hard-reducer";const{ createThunkAction, createAction}=buildActionCreator();constinc=createAction("inc",(val:number)=>val);constthunked=createThunkAction("thunked",async(input,dispatch,getState)=>{dispatch(inc(input.value));return{ret:true};});// HandlecreateReducer({status:"ready",payload:null}).case(thunked.started,state=>{return{state:"started",payload:null};}).case(thunked.resolved,(state,payload)=>{return{state:"resolve", payload};}).case(thunked.rejected,(state,error)=>{return{state:"ready",payload:null};});// dispatchstore.dispatch(thunked({value:1}));
- reduxactions/redux-actions: Flux Standard Action utilities for Redux.
- aikoven/typescript-fsa: Type-safe action creator utilities
- acdlite/flux-standard-action: A human-friendly standard for Flux action objects.
SeeChangeLog.md
MIT
About
Type friendly reducer helper
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.