I’m having a hard time understanding what you are trying to do.
First of all, I don’t see how you are trying to connect your React to your DOM. For your HTML, this is all I’m expecting to see:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
<div id="root"></div>
And then somewhere at the bottom of your JS you’ll have something like this:
ReactDOM.render(<App />, document.getElementById("root"));
And then you have a root React component called App and everything spreads like a tree from there. All of your HTMl gets built as JSX. Right now it just looks like you have fragments of React code and some unconnected HTML. So, it doesn’t matter what you do in your React, it won’t affect the DOM.
Don’t even think about anything else until you get that straightened out.
And then I would get it working without Redux. You are trying to do too many things at once that you haven’t quite yet grasped.
A word on this:
const loadReducer = (state = " ", action) => {
const randNum = () => {
return (randNum.x = Math.floor(Math.random() * (quotes.length))) === randNum.y ? randNum() : randNum.y = randNum.x;
}
switch(action.type) {
case Load:
return state = action.quotes[randNum];
default:
return state;
}
};
OK, after some formatting (please format your code as you write it) This is basically a sound reducer in that the mechanic are sound, even if it isn’t doing what you want.
The first thing is that this:
const randNum = () => {
return (randNum.x = Math.floor(Math.random() * (quotes.length))) === randNum.y ? randNum() : randNum.y = randNum.x;
}
is too complicated. You have recursion inside a ternary. A ternary that is doing internal assignments. And assigning properties to a function. Yes, I get what you are going for, but there are cleaner ways to do the same thing. Why not start out with this:
const randNum = () => Math.floor(Math.random() * quotes.length);
for now. When you’re struggling with something, simplify, don’t make it more complex.
The other problem is here:
return state = action.quotes[randNum];
You are using randNum as the index. But what data type is randNum? This is why I like to start function names with action verbs so I don’t get confused. If I read your variable name, I would assume it is a number.
But again, simplify. Just see if you can get a basic React app going. Get your button up. Then get your button to fire your function. Then get your random quote to appear. Each of those is at least a 10 step process. Don’t even think about Redux before you have it working without Redux. Make small changes and test.