How we Redux — Part 2 (Setup)

First off, welcome to Part 2 of “How we Redux”. If you’re reading this and are confused, that’s okay. Part 1 is here. Part 1 was useful for going over introductory concepts of Redux, UI State, and Domain State.

Alright. Cool. On with the show.

Every good learning project starts with the laborious task of figuring out: “WHAT DO I NEED”, “WHERE DO I PUT THIS”, “HOW DOES THIS WORK”. Let’s get into it.

*Disclaimer. I’m continuously making this integration better. So I may come back and edit this post to reflect my Jedi Wisdom.

Step 1: Startup and Packages

Let’s create a Meteor project! If you don’t have Meteor installed, then do this first

Linux/OSX peeps
curl https://install.meteor.com/ | sh

Or Windows, (sucks for you), here. Now we do this:

meteor create meteor-redux-todos
cd meteor-redux-todos

OR

meteor create Abhi-Is-The-Man
cd Abhi-Is-The-Man

whatever you prefer :)

Take the training wheels off.

meteor remove insecure autopublish

// npm install 

npm install redux react-redux redux-thunk redux-logger classnames react-paginate

We can now use ES2015 module syntax to import these libraries in our code base!

Step 2: Project Structure

First, trash everything. I picked this up from Sam Corcos.

trash meteor-redux-todos.*

You can add Trash with brew install trash.

Now here’s the file structure we’ll be using. This is no way a scalable project structure, if you want me to write a post on MY OPINION of a project structure for big apps, tweet me @abhiaiyer .

├── imports
|   ├── client
|   |  ├── actions
│   |  ├── components
│   |  ├── reducers
├── client   
|   ├── main.js
│   ├── main.html
│   └── main.css
├── packages
├── server
│   ├── methods.js
│   ├── publications.js

Okay, now we have our project structure ready for us to work on!

Now if you’re someone who builds tons of these projects, I highly recommend making some type of boilerplate or generator. This file structure is just for this Todo App. But general advice, DRY out your project scaffolding. You will thank yourself later.

In part 3 we’ll be going over the Domain State code. Part 3 here: https:[email protected]/how-we-redux-part-3-domain-890964824fec#.19kvvfw3d

If you like this series, recommend it to your friends! Follow me on twitter: @abhiaiyer

Getting into React? Check out my post on JSX here.