What is ReduxThunk.default?

JavaScript
1

Hello all!

I’m trying to learn Redux but this code from the “Middleware” section of the challenge confuses me. I’ve tried looking it up to find what it means but nothing comes close. Here’s the code from the last line for easy reference:
const store = Redux.createStore( asyncDataReducer, Redux.applyMiddleware(ReduxThunk.default) )

My question is, what is “ReduxThunk.default”, and how does it affect the code in the challenge?

My other question is; since we are supposed to create the store once, do we include Redux Thunk Middleware by default so that the entire redux code could use asynchronous programming?

Any form of help is appreciated! :smiley:


const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
return function(dispatch) {
  // Dispatch request action here
  store.dispatch(requestingData())

  setTimeout(function() {
    let data = {
      users: ['Jeff', 'William', 'Alice']
    }
    // Dispatch received data action here
    store.dispatch(receivedData(data))
  }, 2500);
}
};

const defaultState = {
fetching: false,
users: []
};

const asyncDataReducer = (state = defaultState, action) => {
switch(action.type) {
  case REQUESTING_DATA:
    return {
      fetching: true,
      users: []
    }
  case RECEIVED_DATA:
    return {
      fetching: false,
      users: action.users
    }
  default:
    return state;
}
};

const store = Redux.createStore(
asyncDataReducer,
Redux.applyMiddleware(ReduxThunk.default)
);

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Use Middleware to Handle Asynchronous Actions

Link to the challenge:

2

From the redux-thunk docs

Note on 2.x Update

Most tutorials today assume that you’re using Redux Thunk 1.x. You may run into
issues when you run their code with 2.x. If you use Redux Thunk 2.x in
CommonJS environment,
don’t forget to add .default to your import:

- const ReduxThunk = require('redux-thunk')
+ const ReduxThunk = require('redux-thunk').default

If you used ES modules, you’re already all good:

import ReduxThunk from 'redux-thunk'; // no changes here 😀

Additionally, since 2.x, we also support a
UMD build:

So I guess if you do not use .default when bringing it in you have to do it when you use it (I think it’s only with CommonJS or UMD build but I might be wrong).

2 Likes
3

Thank you for linking the docs! I’ll give it a read. I guess what you said regarding .default makes sense if I think about it. I’ll try to debunk this with the docs :smiley:
I’m a designer going into web development so I’m still kinda nooby with code and all its jargon. Thanks for your help, I greatly appreciate it! :heavy_heart_exclamation:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.