Installation

npm install use-effect-reducer

import{useEffectReducer}from'use-effect-reducer';

constsomeEffectReducer=(state,event,exec)=>{// execute effects like this:exec(()=>{/* ... */});// or parameterized (better):exec({type:'fetchUser',user:event.user});// and treat this like a normal reducer!// ...returnstate;};

// ...const[state,dispatch]=useEffectReducer(someEffectReducer,initialState,{// implementation of effects});// Just like useReducer:dispatch({type:'FETCH',user:'Sophie'});

Isn't this unsafe?

// pseudocodeconstmyReducer=([state],event)=>{consteffects=[];constexec=(effect)=>effects.push(effect);constnextState=// calculate next statereturn[nextState,effects];}// in your componentconst[[state,effects],dispatch]=useReducer(myReducer);useEffect(()=>{effects.forEach(effect=>{// execute the effect});},[effects]);

Quick Start

import{useEffectReducer}from'use-effect-reducer';// I know, I know, yet another counter exampleconstcountReducer=(state,event,exec)=>{switch(event.type){case'INC':exec(()=>{// "Execute" a side-effect hereconsole.log('Going up!');});return{        ...state,count:state.count+1,};default:returnstate;}};constApp=()=>{const[state,dispatch]=useEffectReducer(countReducer,{count:0});return(<div><output>Count:{state.count}</output><buttononClick={()=>dispatch('INC')}>Increment</button></div>);};

Named Effects

constfetchEffectReducer=(state,event,exec)=>{switch(event.type){case'FETCH':// Capture a named effect to be executedexec({type:'fetchFromAPI',user:event.user});return{        ...state,status:'fetching',};case'RESOLVE':return{status:'fulfilled',user:event.data,};default:returnstate;}};constinitialState={status:'idle',user:undefined};constfetchFromAPIEffect=(_,effect,dispatch)=>{fetch(`/api/users/${effect.user}`).then(res=>res.json()).then(data=>{dispatch({type:'RESOLVE',        data,});});};constFetcher=()=>{const[state,dispatch]=useEffectReducer(fetchEffectReducer,initialState,{// Specify how effects are implementedfetchFromAPI:fetchFromAPIEffect,});return(<buttononClick={()=>{dispatch({type:'FETCH',user:42});}}>      Fetch user</div>);};

Effect Implementations

// Effect defined inlineexec(()=>{constid=setTimeout(()=>{// do some delayed side-effect},1000);// disposal functionreturn()=>{clearTimeout(id);};});

// Parameterized effect implementation// (in the effect reducer)exec({type:'doDelayedEffect'});// ...// (in the component)const[state,dispatch]=useEffectReducer(someReducer,initialState,{doDelayedEffect:()=>{constid=setTimeout(()=>{// do some delayed side-effect},1000);// disposal functionreturn()=>{clearTimeout(id);};},});

Initial Effects

constfetchReducer=(state,event)=>{if(event.type==='RESOLVE'){return{      ...state,data:event.data,};}returnstate;};constgetInitialState=exec=>{exec({type:'fetchData',someQuery:'*'});return{data:null};};// (in the component)const[state,dispatch]=useEffectReducer(fetchReducer,getInitialState,{fetchData(_,{ someQuery}){fetch(`/some/api?${someQuery}`).then(res=>res.json()).then(data=>{dispatch({type:'RESOLVE',          data,});});},});

Effect Entities

constsomeReducer=(state,event,exec)=>{// ...return{    ...state,// state.someEffect is now an effect entitysomeEffect:exec(()=>{/* ... */}),};};

constsomeReducer=(state,event,exec)=>{// ...// Stop an effect entityexec.stop(state.someEffect);return{    ...state,// state.someEffect is no longer neededsomeEffect:undefined,};};

Effect Cleanup

consttimerReducer=(state,event,exec)=>{if(event.type==='START'){return{      ...state,timer:exec(()=>{constid=setTimeout(()=>{// Do some delayed effect},1000);// Disposal function - will be called when// effect entity is stoppedreturn()=>{clearTimeout(id);};}),};}elseif(event.type==='STOP'){// Stop the effect entityexec.stop(state.timer);returnstate;}returnstate;};

Replacing Effects

constdoSomeDelay=()=>{constid=setTimeout(()=>{// do some delayed effect},delay);return()=>{clearTimeout(id);};};consttimerReducer=(state,event,exec)=>{if(event.type==='START'){return{      ...state,timer:exec(()=>doSomeDelay()),};}elseif(event.type==='LAP'){// Replace the currently running effect represented by `state.timer`// with a new effectreturn{      ...state,timer:exec.replace(state.timer,()=>doSomeDelay()),};}elseif(event.type==='STOP'){// Stop the effect entityexec.stop(state.timer);returnstate;}returnstate;};

String Events

// dispatched as `{ type: 'INC' }`// and is the same as `dispatch({ type: 'INC' })`dispatch('INC');

API

useEffectReducer hook

constSomeComponent=()=>{const[state,dispatch]=useEffectReducer(someEffectReducer,initialState);// ...};

constSomeComponent=()=>{const[state,dispatch]=useEffectReducer(someEffectReducer,exec=>{exec({type:'someEffect'});returnsomeInitialState;},{someEffect(state,effect){// ...},});// ...};

constSomeComponent=()=>{const[state,dispatch]=useEffectReducer(someEffectReducer,initialState,{log:(state,effect,dispatch)=>{console.log(state);},});// ...};

exec(effect)

// ...constentity=exec({type:'alert',message:'hello',});

// ...constentity=exec(()=>{alert('hello');});

exec.stop(entity)

// Queues the effect entity for disposalexec.stop(someEntity);

exec.replace(entity, effect)

TypeScript

import{useEffectReducer,EffectReducer}from'use-effect-reducer';interfaceUser{name:string;}typeFetchState=|{status:'idle';user:undefined;}|{status:'fetching';user:User|undefined;}|{status:'fulfilled';user:User;};typeFetchEvent=|{type:'FETCH';user:string;}|{type:'RESOLVE';data:User;};typeFetchEffect={type:'fetchFromAPI';user:string;};constfetchEffectReducer:EffectReducer<FetchState,FetchEvent,FetchEffect>=(state,event,exec)=>{switch(event.type){case'FETCH':// State, event, and effect types will be inferred!// Also you should probably switch on// `state.status` first ;-)// ...default:returnstate;}};