dai-shi/use-reducer-asyncPublic

NotificationsYou must be signed in to change notification settings
Fork9
Star183

React useReducer with async actions

License

MIT license

183 stars 9 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 94 Commits
.codesandbox		.codesandbox
.github/workflows		.github/workflows
__tests__		__tests__
examples		examples
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

Repository files navigation

use-reducer-async

React useReducer with async actions

Introduction

React useReducer doesn't support async actions natively.Unlike Redux, there's no middleware interface, but hooks are composable.

This is a tiny library to extend useReducer's dispatchso that dispatching async actions invoke async functions.

Install

npm install use-reducer-async

Usage

import{useReducerAsync}from"use-reducer-async";constinitialState={sleeping:false,};constreducer=(state,action)=>{switch(action.type){case'START_SLEEP':return{ ...state,sleeping:true};case'END_SLEEP':return{ ...state,sleeping:false};default:thrownewError('no such action type');}};constasyncActionHandlers={SLEEP:({ dispatch})=>async(action)=>{dispatch({type:'START_SLEEP'});awaitnewPromise(r=>setTimeout(r,action.ms));dispatch({type:'END_SLEEP'});},};constComponent=()=>{const[state,dispatch]=useReducerAsync(reducer,initialState,asyncActionHandlers);return(<div><span>{state.sleeping ?'Sleeping' :'Idle'}</span><buttontype="button"onClick={()=>dispatch({type:'SLEEP',ms:1000})}>Click</button></div>);};

Notes for abortability

All async action handlers receivesignal in the argument.Referexamples/04_abort/src for the usage.

Note: The implementation depends onAbortController in the DOM spec.If you are using an environment that doesn't have AbortController (for example IE11), you need a polyfill:1 2

API