DEV Community 👩‍💻👨‍💻

Cover image for Build an async redux-like useStore() hook from scratch
Andrew March
Andrew March

Posted on

Build an async redux-like useStore() hook from scratch

Flux allows us to use global state in our applications, and interact with it using actions. Redux uses strings to denote actions, switch statements to parse the dispatch commands, and is synchronous.

Here is an implementation where we do not need to use strings, or switch, and which is async compatible.

The keys object has properties on it for each variable name in our store, and the actions object has a method for each action.

We create our store in a separate file like this. The methods on the actions object use a shorthand notation here, each action must return the keys (or an array of keys) that it has mutated, so that the dispatch function knows which listeners to call.

We can also import the emit function to trigger state updates inside our async actions.

createStore.js looks like this. Let me know what you think in the comments. This implementation works well with async actions, using async/await notation in the action objects methods.

The makeKeys function means there are less bugs caused by misspelled strings.

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.