Redux is a great tool to manage your app state. But when you deal with the side effect like ajax call. The code will start to look like not that pure. In fact, we can make things right again using pure redux without any other libs. Your action could still be pure object. No more no less. Let’s check how to do that.
The code starts to look ugly when you add the side-effect like ajax call to the code.
Redux-thunk works, and sometimes, the code really not that bad.
redux-saga and love to use it. But I have something to say.
The adding-another-layer nature of
redux-sagaindeed makes the code clean. But sometimes it makes things annoying as well. The most annoying part of
reduxis sometimes you need to open several files in order to make some changes. By using
redux-saga, because some actions are taken over in the
sagalayer. You need to open one more file to complete the flow. Which will be overkill for some requirements like a simple ajax call.
awaitare production ready now for front-end. It actually makes
redux-saganot that appealing if you don’t have that complex logic.
Highly recommend ducks-modular-redux. It will make your folder not look that messy. I use this pattern before I know this concept, but this concept is just more complete.
It’s a plain object to represent the things we wanna do. Quite readable. I want to call
swap service with the
find method. (Don’t bother, it’s just another way to say
send HTTP GET to /swap in feathers.js). When
request success or
request failure, dispatch different actions. Very clean, and the
LoadList is just like the others,
LoadListSuccessfully, it yields pure object.
And you can make it more clean, like store all the
action types in an array, and let the
redux middleware handle this part, because most of the time, they follow the same pattern: A simple
success with data or
failure with error object.
The official definition:
It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.
Aha, what a perfect place to handle the side effect like ajax call.
The flow is very simple:
- You dispatch an plain action object with some unique property name, like the
- Your middleware will know this is the action to process by filtering that unique property name. And it will then handle this action and dispatch another normal action with the result data.
- Now the normal action will hit the
reducer, and then
Although your business logic could be different, but the pattern of a middleware could be the same.
This is the signature of the middleware:
actionyou will receive.
nextis the next redux middleware.
storeis the store object, includes all the methods you need from store.
Simple, if the
action is not our type, we just pass it to the
next middleware and return.
Still simple, we grab the
dispatch method from
store. Then we just do the normal ajax call. You can add more logic here but the concept is very simple.
I am using
feathers.js here. But you can use
axios to accomplish the same, grab the endpoint and http method from the action, then send the network request accordingly.
the result looks like this:
Hope it helps. :)