kingatoki/redux-mini-sprint

Redux Mini Sprint

Topics

• Actions
• Reducers
• The central store
• Connecting React components to Redux

In this mini sprint, you'll be eased in the code base of a small Redux application. The application itself is a counter, with increment and decrement buttons. The increment button should increment the counter by 1. Conversely, the decrement button should decrement the counter by 1. The aim of this mini sprint is to familiarize you with the overarching data flow pattern of Redux, as well as exposing you to how Redux is typically hooked up to a React application.

To run the mini sprint code, npm install inside of the root directory, then npm start. You'll see that the application isn't working. There are a couple of spots that you'll need to fill in in the application in order to get it to function. These spots are in reducers/index.js, actions/index.js, and components/Counter.js.

The code is pretty heavily commented in order to try to clear up everything that is going on with the code that is provided for you. There is a decent amount of boilerplate when it comes to setting up a Redux application and hooking it up to React components, but the benefits that Redux gives you when it comes to predictability and simplicity of your data flow are worth it, especially when your application scales out and becomes much larger.

Take your time walking around the code base. There are lots of informative little tidbits in the comments that you won't want to miss. I highly encourage you to look at every file first before trying to write any code.

If you end up finishing quickly, you'll see there's a few extra credit prompts at the top of the Counter.js component file. Feel free to take a stab at implementing those. Or, you could take a look at the awesome Redux documentation here.

Good luck and have fun!