Write a Counter with Redux - how can I see what the app is doing?

JavaScript
1

Tell us what’s happening:

Hey everyone! The code below actually works, but I am not sure how to use the app. How can I dispatch INCREMENT and where do I see the changes happening? In Javascript, I used browser console to look at errors and printed outputs, but with Redux I am a bit lost.

Thanks!

Your code so far


const INCREMENT = "INCREMENT"; // define a constant for increment action types
const DECREMENT = "DECREMENT"; // define a constant for decrement action types

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state+1;
        case DECREMENT:
            return state-1;
        default:
            return state;
    }
}; // define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = () => {
    return {type: INCREMENT}
}; // define an action creator for incrementing

const decAction = () => {
    return {type: DECREMENT}
}; // define an action creator for decrementing

const store = Redux.createStore(counterReducer); // define the Redux store here, passing in your reducers

store.dispatch(incAction());
console.log(state)

Your browser information:

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

Link to the challenge:

2

I know how you feel. I was going over Redux section today, and it is very underwhelming and explanations are really bad. To much is hidden under the hood, which is kinda decremented to learning it, since this is literally sections on usage of different libraries.

As for how to actually test things outside of limiting window they provide you, you can do it by opening browser console and playing around with things in frames[0].

For example if you go on page of challenge you mention and open up console (ctrl+shift+j in chrome), you can try doing something like this:

frames[0].store.getState()
Output: 0
frames[0].store.dispatch(frames[0].incAction())
Output: {type: "INCREMENT"}
frames[0].store.getState()
Output: 1

Basically write what you want to execute, but add “frames[0]” before it to access frame with your lesson content, and press enter to execute it line by line.
This can allow you to play around in lesson without changing your code or reloading it, to check how things that you written behave in existing environment.

Edit: or if you dont like to add scope of frame all the time, you can change scope of whole console to the frame, by pressing on dropdown menu with “top” in it and choosing “fcc-main-frame” instead.

Edit 2: it would look like this:

Screenshot%20at%202019-01-28%2000-42-51
Screenshot%20at%202019-01-28%2000-42-511366×694 110 KB

After that you can play around just like with frames[0], but without any scope hassle by using things directly:

store.getState()
store.dispatch(incAction())
store.getState()
3

Later on, you will be using Redux within the realm of JS, most likely with React (which is JS, or course). You will get to use your browser console and there are even specific tools for the browser that will let you monitor what Redux is doing while it is happening.

I would finish the Redux section. If it still doesn’t quite make sense, then I’d check out some youtube videos of people putting together some basic React/Redux apps. Yes, React is strange. And then Redux is a whole different level of strange. Your confusion is completely normal. But if you push through it, you will eventually have a very useful and powerful tool.

4

Reach section for me was very straightforward and simple. It was a breeze and I understood everything instantly.
But Redux was nightmare because of bad examples without things that you can interact with and lack of easy to understand flow explanations.
Just including picture of the flow would already improve that section a lot, something like this:

Just that image helped me to get trough lessons instantly. So I think there is much to improve on that section.

5

Whatever works. Redux was a big hurdle for me. It wasn’t until I started to use it that it started to make sense, and only gradually. Now I use it all the time. Personally, I saw lots of diagrams like that and they didn’t quite help me. I’m glad it worked for you.

FCC is open source so if you want to, you can go to the repo and suggest changes. One weakness is that FCC is based around little bite size information and bite size challenges that go along with it. Long passages of explanation are not its strength. I think most people so some side research at this point.

1 Like
6

Wow, thank you guys. Lot of interesting info here, I will look into it.

Thanks again!!!

7

Quick ‘n’ dirty, but you can dump the state of the store in the console (which is very useful). Right after your const store = createStore( line in your app, add window.store = store. You can now access it in the console (to get the state, use window.store.getState()). This lets you dispatch actions as well - window.store.dispatch({type: 'SOME_ACTION'})

Another approach is to render the state of the store in a component, similar approach to above, just have something like

export const StoreDebug = () => <pre>{ JSON.stringify(store.getState(), null, 2) }</pre>;

(Again, just after the const store = ( line, then import it wherever you want to shove it)

1 Like