Brief Intro Of Redux Thunk andRedux Saga

These days all dynamic web applications need to use asynchronous tasks. As a react developer you might use Redux-Thunk within your career and feeling uncomfortable to move another solution like Redux-Saga which becomes trending the last few years. Yes, it has different syntax and when you check it for the first time it looks quite confusing and doesn’t make sense.

The benefit of Redux-Saga in comparison to Redux-Thunk is that you can more easily test your asynchronous data flow.

Redux-Thunk, however, is great for small projects and for developers who just entered into the React ecosystem. The thunks’ logic is all contained inside of the function. More than that you don’t need to learn that strange and different syntax that comes with Redux-Saga. However, in this tutorial, I will show you how can you easily move from Redux-Thunk into Redux-Saga and will explain that strange syntax :D.

Let’s install some dependencies first.

Next, we need to set up a Redux in our project. Let’s create a Redux folder and then store.js file inside it.

then we need to create root-reducer.js

Don’t forget to import our store inside App.js

Now we need to create a fetchTasksReducer.

Whenever we dispatch an action, that action goes through fetchTasksReducer and it updates our state as required. Here is how these 3 conditions work:

  • FETCH_TASKS_START: HTTP request has been started, this can be a great time to show a spinner for example that lets users know that there are some processes are going.
  • FETCH_TASKS_SUCCESS: HTTP request was successful, we must update the state.
  • FETCH_TASKS_ERROR: HTTP request has failed. You can show an error component to let the user know about the problem.

Redux-thunk

Currently, our app does not work as expected, as far as we need an action creator, to fire an action that our reducer handles.

fetchTasks might look strange at the beginning, but it's a function that returns another function that has a parameter dispatch. Once dispatch gets called, the control flow will move to the reducer to decide what to do. In the above case, it only updates the application state, if the request has been successful.

Redux-saga

Redux-saga is a redux middleware that allows us to easily implement asynchronous code with Redux. It’s the most popular competitor for Redux Thunk.

Let’s get started. Let’s assume we have the same project but before Redux-Thunk implementation. Let’s implement Redux-saga middleware in Store.js

It’s time to create actions:

Let’s create a saga folder and in the saga folder, create a new file called fetchTasks.saga.

Those function* thingies are called generator functions.
You can use both takeLatestand takeEvery but we used takeLatest

as far as it takes only the last event.

By calling the put function we can fire actions just like we did with dispatch. It allows adjusting our reducer to handle our actions.

Conclusion

That’s it. Now you are familiar with both approaches of working with asynchronous tasks in React and Redux. You can decide which one to choose based on the project that you are working on.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store