CODEWITHSUNDEEP
reduxreact-redux
DarkArtistry
DarkArtistry

Reputation: 434

Redux Middleware understanding guidance

  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk, api, wsMiddleware, createLogger()),
      typeof window === 'object' && typeof window.devToolsExtension !== 
'undefined'
        ? window.devToolsExtension()
        : DevTools.instrument(),
    ),
  );

So the above is how you would usually create a store, and then you have your middleware that starts like this: 

export default store => next => (action) => {

I did read up the middleware portion from redux.org, but anyone able to better explain it to me what's going on there ?

so is the middleware is receiving the store ? and calling out the next function from the store and than finally using the parameters given as action (in this case). ?

Upvotes: 0

Views: 229

Answers (2)

Michael Peyper
Michael Peyper

Reputation: 6944

The Redux middleware pipeline can be broken down like this...

store => {...}

The store API is the first argument given to the pipeline. This allows the middleware to get the current state at any point in the pipeline and/or dispatch new actions into the store.

Note: It has many of the same characteristics as the store returned from the createStore function, but it is not the same. Only the dispatch and getState functions are available.

next => {...}

The next argument is a reference to the next middleware in the chain. If there are no more middleware to go, the store handles the action (i.e. pass it into the the reducer).

If next is not called, the action will not make it to the reducer. This can be useful to suppressing something that is not a valid action on it's own, such as a function or a promise, as an error will be raised by Redux if it tries to handle it.

action => {...}

The action argument is the thing that gets dispatched into the store.

{...}

In here is where you will test the action to see if there is something special you want to do with it and whether you will pass it onto the next handler.

An example

For this example, we will create a simplified thunk middleware, explaining how it uses each part of the pipeline.

export default store => next => action => {

  // if the action is a function, treat it as a thunk
  if (typeof action === 'function') {

    // give the store's dispatch and getState function to the thunk
    // we want any actions dispatched by the thunk to go through the
    // whole pipeline, so we use the store API dispatch instead of next
    return action(store.dispatch, store.getState)
  } else {

    // we're not handling it, so let the next handler have a go
    return next(action)
  }
}

Upvotes: 1

DarkArtistry
DarkArtistry

Reputation: 434

Functions that conform to the Redux middleware API. Each middleware receives Store's dispatch and getState functions as named arguments, and returns a function. That function will be given the next middleware's dispatch method, and is expected to return a function of action calling next(action) with a potentially different argument, or at a different time, or maybe not calling it at all. The last middleware in the chain will receive the real store's dispatch method as the next parameter, thus ending the chain. So, the middleware signature is ({ getState, dispatch }) => next => action.

The answer was found in the applymiddleware documentation. https://redux.js.org/docs/api/applyMiddleware.html

Upvotes: 0

Related Questions