CodePen Problem - Extract State Logic to Redux

Hi there folks,

I recently completed the first of the front end library projects ‘Build a Random Quote Machine’ which I wrote using React JSX on CodePen and everthing went to plan.

Now I’m trying to get to grips with React - Redux on CodePen (I thought it best to start here rather than trying to set up my local IDE)

I’m using the DisplayMessageApp that we built in the challenges and everything works fine until I try to ‘Extract Local State to Redux’.

I have four changes to make:
remove messages from the local state
remove messages: this.state.messages.concat(this.state.input) from submitMessage()
add this.props.SubmitNewMessage(this.state.input) to submitMessage()
change this.state.messages.map to this.props.messages.map within the list definition:

<ul>

          {this.state.messages.map( (message, idx) => {

              return (

                 <li key={idx}>{message}</li>

              )

            })

          }

        </ul>

Problem is when I make these changes I get an error on CodePen saying: TypeError: can't access property "map", this.state.messages is undefined

You can see the problem pen here DisplayMessageApp Note: you just need to add and remove a semi-colon or something to force the error to display.

I’ve gone backwards and forwards between the FCC code editor and CodePen but I can not get the code that works in the FCC editor to work on CodePen. I just wonder if I am missing a React-Redux dependency or something entirely different?

Currently I have:

https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js
https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.min.js

If anyone could tell me what is going on here I would very much appreciate it.

Cheers,
LT

I thought I’d share this solution to the problem I was having as it appears to be a pretty common problem with very few fixes being offered.

To re-cap:

  • DisplayMessagesApp: code was reproduced in CodePen exactly as writen in the FCC editor after passing all test.

  • App functioned normally upto the point of trying to ‘Extract State Logic to Redux’ at which point the app stopped rendering and various errors were thrown in the console.

This is what I did to fix the problem:

Changed the dependencies (external scripts/pens) in the JS Babel settings by deleting the the ones present and then using the search function that is above the fields in which you add the dependencies:

search for React and select those that you need, the search for Redux and add those.

These are what I added to get things working:

https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js
https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js

Important! Include these at the top of the JS Bable file:

const { combineReducers, createStore} = Redux; const { connect, Provider } = ReactRedux;

Then I had these constants defined before the AppWrapper:
Not sure why I had them, but remove them if you do.

// These were causing problems - app not rendering
const Provider = ReactRedux.provider;
const connect = ReactRedux.connect;

So I removed them.

Lastly, I changed:

ReactDOM.render(<MyApp />, document.GetElementById("app"));

to:

 ReactDOM.render(
   <AppWrapper />,
   document.getElementById("app")
 );

And the app rendered again and functioned correctly.

I hope this helps someone out there. Here’s the link to the pen:

DisplayMessagesApp - ReactRedux

Happy coding folks!