Since we are using the takeLatest helper function here, when LOAD_TAKOYAKI is dispatched, loadTakoyaki will start in the background, and any pending loadTakoyaki tasks that started prior will be canceled. In the above snippet, t akoyakiSaga watches for actions that match the pattern LOAD_TAKOYAKI, then triggers the saga task loadTakoyaki. Using Redux Thunk, our actions file currently looks like this:īoth the watcher and worker Sagas are generator functions, which are denoted with an asterisk ( *) beside the function keyword.Ī watcher Saga watches for when actions are dispatched to the Redux store. (Despite these technical distinctions, action creators are often referred to simply as _actions_, which is a-okay, as long as there’s a mutual understanding.) Finally, action types are strings that describe an action. They are typically plain old JavaScript objects (POJOs), but sometimes are functions (like in the case of using Redux Thunk). Actions are what's returned from action creators. Let’s start with the action creators, containing three simple actions.Ī quick distinction between action creators, actions, and action types: Action creators are functions. Note: This walkthrough assumes that you are using Redux for state management, with Redux Thunk as the middleware. In the sections that follow, I will walk you through how to replace thunks in your application with Sagas, from refactoring the actions and reducer to writing Sagas and applying Saga middleware to the Redux store. The decision to transition to Redux-Saga prepares us to write clean and readable tests easily, reinforcing one of our company themes: developer happiness. As the FireHydrant system continues to grow, so does our test coverage. While it is not impossible to test thunks, it does require mocking API calls (and any other functions called within them), resulting in clunkier, less readable tests. While we are already reaping each of these benefits, the one that stood out to us is the ability to test asynchronous flows easily. Why it's a good idea, directly from the Redux Saga docs: "Contrary to redux thunk, you don’t end up in callback hell, you can test your asynchronous flows easily and your actions stay pure." At FireHydrant, we recently began to replace our usage of thunks with Sagas to handle our data fetching.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |