Building a single-page CRUD app using React and Redux can be challenging because you’ll have to deal w/ new techniques and terms like “Reducers”, “Actions”, “Middlewares”, “Stores” and so on.
Perhaps the trickiest part is making async requests and handling responses. While there are many examples, there is no well established pattern for making async requests and handling responses in Redux apps(just yet).
In this blog I’ll provide a general approach on how to build a Blog app that has 3 pages and show navigate b/w them.
Further, I’ll also establish a pattern for making async requests and handling four async states: “loading”, “success”, “error” and “success-and-navigate”.
Source code: https://github.com/rajaraodv/react-redux-blog
Live App: https://protected-escarpment-79486.herokuapp.com/
Twitter: https://twitter.com/rajaraodv (@rajaraodv)
Let’s get started.
STEP 1 — Write Detailed Mocks For Each Page And Phases.
In our app we have 3 pages: An Index page that shows a list of Posts, a Post details page and a New Post page.
Each page has “Success”, “Loading” and “Error” phases because they all make AJAX calls to load/delete posts, so we need to mock those things as well.
