When adding a new note to our bulletin board wall of notes, we’re able to do so thanks to thunk. Redux thunk, that is.
More specifically, the use of action creators in our React app enables us to manipulate the database in order to, for example, send a post request to the backend powered by Rails.
Behind the scenes, we’ve got our action creator, addNote, set up to return a function that accepts dispatch as an argument. How this works is all thanks to redux thunk.
Redux store
The redux store is incorporated in the app to keep track of state, which stores all the app’s data from the frontend side of things.
Initially, we start off with an initial state of an empty array, which will become populated throughout a user’s session. By invoking the createStore method, we’re able to incorporate the redux store, passing in the reducer function which covers all the cases to manipulate the store determined by the actions invoked, the initial state, and enhancers.
Similar to how the reducer function (found in notesReducer) conveniently compacts how we enact actions to state, the compose method allows us to combine multiple enhancers, which modifies the flow of the app. As the createStore method only allows a single enhancer, to be able to use our dev tools and thunk, we use the compose function to register multiple enhancers to create a single enhancer function.
Now that we’ve got our store in place and properly set up, we need to account for how React works synchronously.
Manipulating the store
Our ability to manipulate the state we’ve set up hinges on our ability to also invoke dispatch, the method trigger our reducer function.
Using the connect method, we’re able to connect the app to the store. We pass in the action creator to the connect method, where the return value is expected to be an action JS object. However, react-redux automatically handles calling dispatch for us, directly passing along our action object (whether that’s addNote, fetchNotes, and/or updateNote) to the reducer (notesReducer). Calling the action creator through props, “this.props,” the return value is another regular object.
Problem: The issue is that React assumes the return value of the action creator will be a regular object with a type property to be able to call dispatch on the object behind the scenes, without us ever explicitly invoking it.
In the action creator (addNote), we’re making a fetch request. Since fetch requests operate asynchronously, it would return a promise, as opposed to the action object the reducer expects as its second argument.
Thunk intercepts
Since we can’t have React invoking dispatch or us, we need to be able to call dispatch on the eventual returned object from the backend, to then manipulate the state.
Incorporating thunk allows the action creator to accept dispatch as its argument — as connect passes the method as props — for the action creator to access and call it from its inner function as soon as the promise resolves into a response object from the backend.
What thunk is
Redux thunk is middleware, our middleman, stepping in for us to be able to return plain JS objects vs. the promise a fetch request would typically return. It inserts itself in the middle of the usual redux flow, at the point between we dispatch an action vs. the moment it reaches the reducer.
Thunk is essentially just a function that’s returned from another function, so that we can defer some work to do later.
When we use redux thunk, our action creators can now return thunk functions, instead of returning plain JS objects (actions).