The target

Understand why you need Redux middleware

The problem

Question: When retrieving data, how do I send Ajax to retrieve the data and save it to Redux?

Solution 1: Send a request to the service component, get the data, and dispath

Scenario 2: Dispatch directly in the business component, send the request in dispatch, and save the Redux.

The middleware

Middleware.

The execution time of the Redux middleware is between the Dispatching action and the reducer.

  • No middleware:

    • dispatch(action) => reducer. Used to initiate status updates

  • Using middleware:

    • Dispatch (action) => Execute the middleware code => Reducer. Dispatch () is a dispatch wrapped by the middleware, but eventually the Redux library’s own dispatch method must be called

summary

Middleware is an extension of the original function

The execution time of redux middleware is after Dispatch and before reducer logic

Redux-thunk – Basic use

The target

Know how to use Redux-Thunk and understand how middleware works.

role

The Redux-Thunk middleware can handle actions in the form of functions. Therefore, asynchronous action code can be executed in a functional action to complete asynchronous operations.

Expanded functions to support functional forms of action

  • before

    • Const action1 = {type: 'todos/add', payload: 'Learn redux'} Dispatch (action1)Copy the code

  • after

    • Const action1 = async (dispatch) =>{const res = await () dispatch({type: 'todos/add', payload: 'Learn redux'})} dispatch(action1)Copy the code

steps

  1. Install: NPM I redux-thunk

  2. Use: in store/index.js

    1. Import Redux-thunk, applyMiddleware

      import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
Copy the code

    2. Call applyMiddleware to add Thunk to the middleware list

      const store = createStore(rootReducer, applyMiddleware(thunk))

    3. Modify Action Creator to return a function whose parameter is Redux’s Dispatch

      Const addTodo = (name)=> {return async (dispatch) =>{const res = await asynchronous action () dispatch({type: 'todos/add', payload: Name})}} Dispatch (addTodO(' learn redux')Copy the code

The sample

Axios. Post (‘ www.fastmock.site/mock/74f9d7… ‘)

Middleware – story – logger

The target

Master the use of redux-Logger and can view redux operation logs.

Understand the working process of multiple middleware

steps

  1. Install: YARN add redux-Logger

  2. Use. store/index.js

    1. Import story – logger
    2. When the applyMiddleware function is called, logger is passed in as an argument
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from './reducers'
const store = createStore(rootReducer, applyMiddleware(logger))
Copy the code

  1. Test the effect.

    Call store.dispatch() to view logs recorded by logger middleware

Story – devtools – the use of the extension

The target

Use chrome developer tools to debug and track redux status while developing react projects

Install redux developer tools first, and then redux debugger

Document redux devtools — the extension

redux-devtools-extension

A tool for debugging redux operations in a browser

steps

  1. Install the React developer tool
  2. Install the Redux debugger, which is an NPM package, in your project.npm i redux-devtools-extension -D
  3. Configuration. Configure and import in store/index.js
import { createStore, applyMiddleware } from 'redux' import { composeWithDevTools } from 'redux-devtools-extension' const store = Reducer, composeWithDevTools(applyMiddleware..) )) export default storeCopy the code

The effect

Every redux operation is logged

Extension – Redux – Thunk – Middleware principles

  • Redux-thunk source link
Function createThunkMiddleware(extraArgument) {// Const myMiddleware = store => next => action => {/* Write middleware code */} return ({dispatch, }) => (next) => (action) => {// redux-thunk // If it is a function, call the function (action). Return action(dispatch, getState, extraArgument); if (typeof Action === 'function') {return action(dispatch, getState, extraArgument); } // If it is not a function, call the next middleware (next), passing the action; // If there is no other middleware, next means: Redux's own dispatch method return next(action); }; }Copy the code

\