Front End Development Libraries Projects Drum Machine React Redux connection issue

Tell us what’s happening:
Hello,
I’m trying to set up React-Redux to pass the 7th test:

7. When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

Before trying to use react-redux, I was able to pass all tests except for this one.

I’m still confused about how Redux and React-Redux works because I’m having a few issues:

  • Uncaught TypeError: connect is not a function at https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-ece9756f-9890-f712-85c4-d58d8bb7d702:168
    • I assume there is some issue with importing connect from ReactRedux, but don’t know what.
  • My integration with react-redux is not correct and I’m unable to render the drum pad correctly.
    • I’m not familiar with how to really integrate react-redux and have been going over the docs and the lessons on fcc to no avail. I believe I should be able to create a store, action, action creator, reducer, the two mapping functions (mapStateToProps and mapDispatchToProps), connect them to react with connect(), call the dispatch where needed, and things should work, but they don’t right now.

Thanks again for the help and let me know if I need to clarify anything.

Your code so far

Your browser information:

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

Challenge: Build a Drum Machine

Link to the challenge: