DEV Community


Discussion on: React Hooks: How to create and update Context.Provider

jeyloh profile image

Huge help! But I have a question regarding actions. The dispatch functions in App.js:
let inc = () => dispatch({ type: "increment" });

How can we move these in a separate function outside of the React component? I'm playing around with your example, and the Hooks/Context docs, but I'm still to find a nice pattern.

I wanted to move out my functions from App.js and useReducer inside these functions, before I realized Hooks are only supported in custom hooks and components.

Can I pass state and dispatch to the actions to use them, or name the actions like this "useAction1", "useAction2" etc. and then call these from the React component? Seems like an anti-pattern.

The reason I want to move them is to reuse actions from many components and only update the reducer state instead of returning data. My example consists of multiple API calls, localStorage etc.

Cheers, again - huge help with this article :)