Detailed explanation of redux-thunk practical project cases

This time I will bring you a detailed explanation of the redux-thunk practical project case. What are the precautions for using redux-thunk practical project? The following is a practical case, let’s take a look.

The core concept of redux is actually very simple: store all the state that needs to be modified into the store, initiate an action to describe what happened, and use reducers to describe how the action changes the state tree. When creating a store, you need to pass in the reducer. What can really change the data in the store is the store.dispatch API.

1. Concept

After dispatching an action and before reaching the reducer, you need to use middleware to perform some additional operations. You can use Redux middleware for logging, creating crash reports, calling asynchronous interfaces or routing, and more.
In other words, middleware is an enhancement to store.dispatch()

2. Usage of middleware

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

Introduce thunk middleware directly and put In the applyMiddleware method, passing in the createStore method completes the functional enhancement of store.dispatch(). That is, you can perform some asynchronous operations in the reducer.

3.applyMiddleware()

In fact, applyMiddleware is a native method of Redux, which combines all middleware into an array and executes them in sequence.

If there are too many middlewares, they can be passed in as parameters one after another

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger)
);

If you want to understand its evolution, you can go to the official documentation of redux: https://redux.js.org/advanced/middleware

4.redux-thunk

Analyze the source code of redux-thunk node_modules/redux-thunk/src/index.js

function createThunkMiddleware(extraArgument) {
 return ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
   return action(dispatch, getState, extraArgument);
  }
  return next(action);
 };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

redux-thunk The middleware export default is the thunk passed by createThunkMiddleware(). Looking at the createThunkMiddleware function, it returns a curried function. The code we translate into ES5 is easier to read.

function createThunkMiddleware(extraArgument) {
  return function({ dispatch, getState }) {
    return function(next){
      return function(action){
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
}

With this look, we can see that the most important idea of ​​redux-thunk is that it can accept an action creator that returns a function. If the action creator returns a function, execute it. If not, execute it according to the original next(action).

Because this action creator can return a function, you can perform some asynchronous operations in this function.

For example:

export function addCount() {
  return {type: ADD_COUNT}
}
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

The addCountAsync function returns a function, pass dispatch as the first parameter of the function, and perform asynchronous operations within the function.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS to get the last 7 days and the last 3 days

Angular ng-animate and How to use ng-cookies within the project

The above is the detailed content of Detailed explanation of redux-thunk practical project cases. For more information, please follow other related articles on the PHP Chinese website!