Redux Middleware Infinite loop?

Question

On the snippet of code below I am having a hard time understanding how result = next(action) doesn't end up being an infinite loop. Since the "last function" action => takes parameter action and calculates the result value based on the function that takes the next argument (next => action =>) that then call the function that takes the action parameter (next => action =>) AGAIN.

Essentially the recursiveness of this code is hard to understand.

import C from '../constants'
import appReducer from './reducers'
import { createStore, applyMiddleware } from 'redux'

const consoleMessages = store => next => action => {

    let result

    console.groupCollapsed(`dispatching action => ${action.type}`)
    console.log('ski days', store.getState().allSkiDays.length)
    result = next(action)

    let { allSkiDays, goal, errors, resortNames } = store.getState()

    console.log(`

        ski days: ${allSkiDays.length}
        goal: ${goal}
        fetching: ${resortNames.fetching}
        suggestions: ${resortNames.suggestions}
        errors: ${errors.length}

    `)

    console.groupEnd()

    return result

}

export default (initialState={}) => {
    return applyMiddleware(consoleMessages)(createStore)(appReducer, initialState)

zzzzBov · Accepted Answer · 2018-04-11 20:49:19Z

2

next is not the name of one of your functions, it's the parameter name.

Calling next doesn't call the action => {...} function.

There isn't any recursion here.

Rewriting the code may clarify things for you:

function consoleMessages(store) {
  return function (next) {
    return function (action) {
      ...
      let result = next(action)
      ...
    }
  }
}

answered Apr 11, 2018 at 20:49

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BluePython Over a year ago

Thanks. So when an "action" happens then it triggers the entire thing. what is the next "object" then doing when you give it the action? is the console message trying to display the action that is happening now ?

BluePython Over a year ago

is the reason to add the action => {..} function is having the ability to do an asynchronous function? Since you could argue "result = next (action)" could be implemented in a function that accepts both the next & action object. Not sure why the last function is necessary.

zzzzBov Over a year ago

"what is the next 'object' then doing when you give it the action?" next is a function. I don't know what it does. Feel free to look it up in the applyMiddleware API.

zzzzBov Over a year ago

"is the reason to add the action => {..} function is having the ability to do an asynchronous function?" I don't exactly understand what you're trying to ask here. I think what you're not understanding is that the applyMiddleware function requires a parameter that behaves in a certain way. The reason for the behavior is entirely on the applyMiddleware function, so my recommendation is that you go review the source if you want to understand how it works.

Collectives™ on Stack Overflow

Redux Middleware Infinite loop?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related