What is required to be behind the hood in codepen

JavaScript
#1

Tell us what’s happening:
I passed this redux challenge in fcc but cannot get the output in codepen

Your code so far


const reducer = (state = 5) => {
return state;
}

// Redux methods are available from a Redux object
// For example: Redux.createStore()
// Define the store here:
const store = Redux.createStore(reducer);

I passed the fcc challenge for this redux test but cannot pass on codepen. I put most of the stuff behind the hood of codepen file but does not work even then, Please advise. Thanks.This is my codepen link here: [https://codepen.io/meeramenon07/pen/MWWvwvK?editors=1010]

Your browser information:

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

Challenge: Create a Redux Store

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/redux/create-a-redux-store

#2

Your code on codepen:

const reducer = (state = 5) => {
  return state;
}

// Redux methods are available from a Redux object
// For example: Redux.createStore()
// Define the store here:
const store = Redux.createStore(reducer);

ReactDOM.render(
  <Reducer />,
  document.getElementById('root')
);

A good start would be defining the react element that you’re trying to render. Either create a class that extends React.Component or create a functional component.

#3

The reducer is a function that updates some state, it doesn’t have anything to do with React; it is not a component. You can’t render it because there is nothing to render. Redux is used primarily with React, via the react-redux library which you’ve included, but the store just creates an object, and the reducer is just a function you define to update that object. It has absolutely nothing to do with React unless you explicitly join the two things together. There isn’t anything hidden in FCC, at that point in the curriculum it [correctly] does not even mention React.

You aren’t really getting what Redux is here (which is understandable, despite it being an extremely simple thing, it is hard to grasp at first). It is plain, quite simple, JavaScript. You can test it on codepen by logging things (console.log(store.getState()) should print 5), but you can’t visualise it until you join it up with React.

1 Like
#4

On the subject of just learning Redux, I can’t resist an opportunity to recommend Dan Abramov’s free egghead.io course on the topic. I also like accompanying it with these written course notes.
For me at least, the greater depth found there was very useful.

1 Like
#5

ok, thank you. will surely read it up then.

#6