My first attempt with Redux with React

After watching The New Boston tutorial on Redux I decided to try my hand at building my own project using the material from Bucky’s tutorial.

Here is a link to my repo if you want to check it out:

Basically, after finishing this project I have a better working knowledge on how Redux works. There was headaches at first and skeptism. Although, I realize it was a small project and its practicalness really shines then.

Any suggestions on the code is appreciative

Thanks :slight_smile:


It would have been an overwhelmed situation, as you were benefited and succeeded in building a React - Redux project. Even I also want to try building Redux project. For that, I am referring React and Redux online tutorial Guide

Nice… But you added redux-logger (logs out changes in the store) and you didn’t make use of it; It shows your previous state, action dispatched and current state. Since you know react redux, you can check out this tutorial by Wes Bos -> Learn Redux

From his tutorial, you could learn how to use react-router (if not known), redux devtools, error tracking on Sentry, creating a simple form in react and so on… Just check it out :wink:

Nice job getting a production webpack config going. I don’t think it’s quite complete though. You can use the one provided with the create-react-app or read this book here:

For example, in this app you need to implement five things:

  1. extract the html version for production
  2. extract css
  3. provide cache via hashes in the name of the files
  4. have a separate build dir
    5 (optional) delete the previous contents of the dir whenever you run the production script

When I originally built the production version of the webpack config file, it was because I was using it on a previous project that I was trying to push to Heroku. Still having trouble with deploying it but I’ll look into fixing that config file.

I think it would be better to use constants for the action / reducer types rather than string like…


export const CHECK_OFF = ‘CHECK_OFF’;
export const CHECK_BACK = ‘CHECK_BACK’;
export const ADD_TASK = ‘ADD_TASK’;
export const REMOVE_TASK = ‘REMOVE_TASK’;

Why though? I can’t see the difference…

I have written some big games before with lots of magic numbers and magic strings everywhere which eventually became a nightmare to maintain. So now I am paranoid about ever having them in my code. For a smaller program I guess it does not matter too much though but its best to make a habit of not using magic strings. There is even a specific moment I remember in the pluralsight es6 react redux course that the guy says “You likely cringed earlier when I used hard coded strings for action types. And hey if you didn’t you should have, magic strings are just typos waiting to happen.”

With strings you won’t have code completion so you might make a typo, if you decide to change the type in action later you might forget to change it in reducer then there won’t be any errors so it might take a while to find. If you had it as constant then use refactor in IDE like webstorm it would rename every place at once, or if you change it in actiontypes.js and forget other places it will give you an error that the variable does not exist at least.

Oh yeah with larger programs you might have actions that do things in multiple reducers rather than just one which makes it even harder to not make a mistake.

For example in my react-redux-roguelike my actionTypes.MAPGENERATE is used in my monsters reducer, players reducer, and my tileGrid reducer. There were a few times I made changes to my action types without even remembering that I was using the action type in a different reducer so I would have never remembered to change it if I used strings.

Ahhh - I see why that would be a better idea to store your actionTypes in constants. If they’re in strings it’s alot easier to get a typo. However, while in a constant, the IDE will store them and autofill. I’ll have to include that.

I did have another question about my production config file. When I map out my “build” folder, is the minified app.js is where I want to enter?