React Chained Modals Comparison
A comparison of methods to create a sequence of modals where clicking the "Next" button advances to the next modal. Requirements are broken down into levels where L1 is the simplest and L4 is the most complex. Each higher level includes the requirements of the previous level.
- Method A: React only
- Method B: React + React Router
- Method C: React + React Router + Redux
- Method D: React + React Router + Redux + Redux Thunk
- Method E: React + React Router + Redux + Redux Saga
- Method F: React + React Router + Redux + Redux Thunk + Async/Await (ES2017)
- Method G: React + React Router + Redux + Redux Loop
$ cd L4.methodE.react.router.redux.saga $ npm install $ npm start $ # goto http://localhost:3000 in the browser $ # tested with Node 5.5.0
Requirements / approaches
L1 - complexity level 1
- Clicking the "Next" button advances through a sequence of modals
- Support a configurable list of modals that is known at page load
- Fade in animation works
L2 - complexity level 2
- Support browser Back and Forward navigation
- Allow deep linking to a specific modal
- Support saving form data in the modals
- Show validation errors from the API
- Show a spinner while waiting for the ajax request
L3 - complexity level 3
- Display data from the server pre-filled in the user input boxes
- Using the browser Back and Forward navigation should preserve the user's input
- Start to see a need for Redux here. Need to save each of the modals state in parent component. When there are many modals with a lot of state, it may be too much to store in the parent component. It works w/o Redux with limitations. If we navigate to the end of the modal chain, the state is lost.
- Redux is used to hold the user data and keep track of current modal.
- Parent component is still used to navigate to the next modal.
- Individual modal components make the ajax calls.
- State and functionality is managed by both Redux and components which may be undesireable.
- Move ajax calls and naviation from components to actions using redux-thunk.
gotoNextbut could call it from
L4 - complexity level 4
- Support conditionally shown modals based on result of an ajax call e.g. if a validation step fails, the modal will be shown. Otherwise, it is skipped.
- Promise related code in
shouldShowChecklooks a little ugly
- Probably there is still not enough complexity for Redux Saga to really shine, but it looks a little better to me.
- async/await syntax is nicer than generator syntax used with redux-saga
- redux-saga is more testable and can handle more complex workflows
- requires ES2017 (stage 3)