In the useReducer hook, React recognizes that the state was updated and re-renders the component. This happens through listeners and subscriptions. In Redux, dispatch needs to tell the app that the state has been updated. Now, of course, there is more to this in the actual implementations. Here’s a very simplified version of what that looks like:Īnd voila! We have built a simple implementation of the dispatch function. That means that the dispatch function can invoke the reducer function. So the dispatch function also has access to reducer - our reducer function (no matter what we called it) that we passed in. In that same scope is the reducer function that we have written and passed into createStore or useReducer. So that means that inside the dispatch function, we have access to an object called currentState that is the current state in our app. The dispatch function is in the same scope as the current state of the app. There are a couple of points that we need to cover before we can write this though. This is the abstraction part that hides from our view of what is happening behind-the-scenes. Now the exciting part! The next thing we will do is call the reducer from within the dispatch function. Now we can build our reducers with confidence knowing that any action that is dispatched will be an object and will have a "type" property. We start with the function definition.Įnter fullscreen mode Exit fullscreen mode So let's build a simple implementation of dispatch to see the logic that is abstracted out of our view. I think looking at how the dispatch function is built really helps remove the mystery behind reducers. Like, what the heck?!? 😡 The reducer hook flow has one less layer of abstraction, but there is still some there that adds to the confusion. a reducer is called and state and an action object are passed in. If you're using Redux, you call an action creator function and POOF. Second - both flows "abstract" some of the logic into different functions. The basic idea here that makes these patterns hard is that data is flowing from function to function, and often changes shape a little (or even a lot 😬) before your state is updated and the component re-renders. For more on functional programming, read the first half of this article - Functional Programming in JavaScript: How and Why.
#Dispatch call type fu how to
Thinking in this way requires you to switch your mental model of how to manage data in your application. There are a couple of reasons that learning Redux or the reducer hooks can be confusing.įirst - both flows rely on a programming paradigm called "functional programming". I will help you understand what happens under-the-hood and remove the mystery behind dispatch. Learning redux? Or useReducer? Then chances are you've been frustrated by the black magic that is the dispatch function 🧙♂️! Well, luckily you have found this post.
0 kommentar(er)
