Thunk (current version 2.4.2) breaks the code - Build a 25 5 Clock

JavaScript
1

Tell us what’s happening:

Quick help: use redux-thunk 2.3.0 instead of 2.4.2 in CodePen.

Issue:

I assumed that building a clock, working with 1000ms (setTimeout, set Interval), employs an async code. Since I already played with Redux in two projects, I expected this challenge particularly requires using thunk. The thunk topic was really poorly explained in the FCC theory, JS Libs course being somewhat substandard in usually amazing and detailed FCC explanations. Challenge descriptions contain too few useful hints around pitfalls.

First I have made synchronous part of my code, using functional paradigm, with couple of reducers, combineReducers, useSelector, useReducer - and that part worked perfectly fine.

Just this simple change:

  • Adding thunk in settings of codepen (2.4.2 is current version).
  • Changing this:
    const store = Redux.createStore(rootReducer);
    For this:
    const store = createStore(rootReducer, applyMiddleware(ReduxThunk.default));

Note: No async action creator or handler function was used yet, just applying it to existing tested parts!

It broke that completely synchronous code. Empty screen, no app, except root element from HTML. Nothing. No errors in Babel/JS part of the code.

So I tried this: I have created another completely synchronous dummy app (counter increase, with simple store and simple one-value reducer, for the sake of testing) with React, ReactDOM, Redux, ReactRedux (all default versions, linked via settings). It works and display perfectly fine.

Then when I linked default ReduxThunk from settings:
https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.4.2/redux-thunk.min.js

And replace this:

const store = createStore(counterReducer);

With this:

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

The code breaks again, the app disappears totally.

I did not find many thunk-related posts, but I found one app, that seems to work with Thunk. And I noticed it uses:
https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js

So I replaced it in both of my codes (Dummy counter, 25+5clock) too - and voila - it works!

So apparently 2.4.2 is buggy in CodePen, or usage is different?
Not sure, I’m new to Thunk.

Even for 2.3.0., there is a weird catch:

You can’t use this usual combination:

const { thunk } = ReduxThunk.default;
const store = createStore(counterReducer,  applyMiddleware(thunk));

You have to skip destructuring thunk variable and use ReduxThunk.default inside the createStore function:

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

This looks kind of abnormal as well, or is there some catch in newer React/Redux?

Note 1: redux-thunk 2.4.2 even does not recognize ReduxThunk.default ???

Note 2: I applied 2.4.2 into working and tested Thunk-based code of someone else - ( https://codepen.io/sh1zuku/pen/XBrQVr?editors=0010 ) and it immediately broke. Same symptoms. Reverting to 2.3.0, all is fine again.

Final remarks:

  1. Is it really redux-thunk 2.4.2 issue - if it is added through codepen settings? What is the latest good version between 2.3.0 and 2.4.2 then? Some folks even suggest reverting back to redux-thunk 1.x to avoid having to use “ReduxThunk.default”.
  2. Could it be also the notorious React 17 versus React 18 issue, that bubbled elsewhere? Or other of the 5 imported libraries, having wrong version and misaligning with Thunk?
  3. Would it hurt to add these notes (use Thunk 2.3.0, perhaps React 17, etc.) into the actual description of the Challenges, so that people do not have to spend days investigating these bugs, instead of focusing on algorithms and usual correct usage of libraries? I bet I am not the first one to stumble upon this. :wink:

Writing it for the sake of those struggling after me.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock

Link to the challenge:

2

With 2.4.2 if I just pass ReduxThunk into applyMiddleware the code runs.

I would highly suggest not using Codepen for anything React related (or any view framework really). Use StackBlitz or CodeSandbox.

I usually stay clear of Redux so I’m no expert and I admit I didn’t read your post too closely, but here are some general points when troubleshooting:

  1. Look at the release notes for each version of the libs.

  2. Read the docs.

  3. Inspect the global object and look at the libs, their names, what types they are, and so on.

  4. For redux-thunk as it is such a small lib you can also look at the source. Just open the non-minified versions.

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.js

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.4.2/redux-thunk.js

Even with 2.3.0 this would not work as default is a function.

const { thunk } = ReduxThunk.default;

But doing this does as it just assigns the function to a new variable.

const thunk = ReduxThunk.default;

const thunk = ReduxThunk.default
console.log(typeof ReduxThunk.default) // function
console.log(JSON.stringify(ReduxThunk.default) === JSON.stringify(thunk)) // true
3

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