loading...

React useAsyncReducer hook with RxJs extension

alekniukas profile image David ・1 min read

Very recently we had an awesome enhancement to our React apps with the hooks extension. I’ve been enjoying them ever since they were release. They have brought a flexibility to have a reusable state and my apps look more functional and are a lot easier to read.

I would like to present a new hook to the audience, the useAsyncReducer. It’s pretty straight forward to use, just like Reacts useReducer and is available from the npm.

npm install @alekna/react-store

If you are familiar with the Redux principles this should feel very intuitive and straight forward. Please click here to go straight to the codesandbox for example.

Usage example

import { useAsyncReducer, ofType } from '@alekna/react-store';

function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useAsyncReducer(reducer)
  ...
}

Dispatcher events

// sync event
dispatch({ type: "decrement" })
// async event
dispatch(async () => {
  await sleep(500); // fake api request helper fn
  return { type: "increment" };
})
// RxJs event with actions$ stream observable
dispatch(actions$ =>
  interval(1000).pipe(
    startWith(0),
    take(5),
    map(() => ({ type: "increment" })),  
    takeUntil(actions$.pipe(ofType("cancel")))
  )
)

Hope you’ve enjoyed this tutorial. Please let me know your thoughts and share it if you liked it! Thanks for reading.

Posted on by:

Discussion

pic
Editor guide