preface

Redux-thunk redux-thunk redux-thunk redux-thunk redux-thunk redux-thunk redux-thunk If you still don’t understand Redux middleware, check out my Redux article.

  • Implement a mini Redux (Base version)
  • Implement a Redux (perfect version)
  • React Context API
  • Take you to implement React-redux

Why redux-thunk

With the Redux process, an Action object is dispatched through the Dispatch method. When using redux-thunk, we can dispatch a function. Redux-thunk automatically calls this function and passes the Dispatch, getState methods as arguments. This way, we can handle asynchronous logic and complex logic in this function, which Redux couldn’t do because it could only dispatch a simple object.

usage

Redux-thunk, the middleware of REDUx, is used to handle asynchronous requests, such as:

export function fetchData() {
  return (dispatch, getState) = > {
    // to do ...
    axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res= > {
      console.log(res)
    })
  }
}
Copy the code

Story – thunk the source code

The source code for redux-Thunk is relatively concise, with 11 lines in fact. In previous installments, we talked about redux’s middleware form, which is essentially an enhanced version of the Store. dispatch method, and looks something like this:

const middleware = (store) => next => action => {}
Copy the code

I won’t go into details here, but look at implementing a Redux.

First give a shrunk version of the implementation:

const thunk = ({ getState, dispatch }) = > next => action= > {
    if (typeof action === 'function') {
        return action(dispatch, getState)
    }
    return next(action)
}
export default thunk
Copy the code
  • When an action is function, call this function (pass in dispatch, getState) and return it. If not, it passes directly to the next middleware.

The complete source code is as follows:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) = > next => action= > {
    // If action is a function, return action(dispatch, getState, extraArgument), otherwise return next(action).
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument)
    }
    // Next is the store.dispatch that was passed in before the rewrite
    return next(action)
  }
}

const thunk = createThunkMiddleware()
// Set a variable withExtraArgument to thunk and assign the entire createThunkMiddleware function to it
thunk.withExtraArgument = createThunkMiddleware

export default thunk
Copy the code

The extraArgument is passed in as a custom argument, as follows:

const api = "https://jsonplaceholder.typicode.com/todos/1";
const whatever = 10;

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);

// later
function fetchData() {
  return (dispatch, getState, { api, whatever }) = > {
    // you can use api and something else here
  };
}
Copy the code

conclusion

The same side effects as redux-Thunk’s very popular library redux-Saga are doing asynchronous requests in Redux. This is the end of the Redux-related article series, and I will write another series next time.


  • Ps: Personal technical blog Github warehouse, if you feel good welcome star, give me a little encouragement to continue writing ~