Recipe for React Redux Application

React Redux Recipe

I’ve recently been working on a React-Redux application and thought to myself, “It would be nice if there was a general recipe to follow when putting together a React-Redux application.” So, I started looking around and came across a few resources/tutorials that provide great step by step approaches to building a React-Redux application (links to those resources provided below). Taking the best from existing resources I’ve come up with a React-Redux recipe that can hopefully be a general guide for building your own application using React and Redux.

Ingredient List

  • Piece of paper (whatever tool you use for making mock-ups)
  • Container components (class components)
  • Presentational components (functional components)
  • Reducers
  • Actions
  • Action creators
  • Redux middleware

Step One — Whip Up a Nice Mock-UP of Your Application

Step Two — Take Your Mock-Up & Break It Down Into Components

Step Three — Think Through The State & Necessary Actions For Each Component

Step Four — Create The Action Creators Per Actions From Above

Step Five — Create Reducers That Will Be Connected With Related Actions

Step Six — Create Your Container and Presentational Components Broken Down From Step Three

Step Seven — Whip It All Together Using Import, mapStateToProps, mapDispatchToProps, bindActionCreators, and Connect