tony-kerz/redux-scratch

redux-scratch

This application is intended to illustrate a non-trivial React application in conjunction with the Redux "predictable state container".

Redux is said to evolve the ideas of Flux, but it generally handles the concerns of Flux in terms of managing data flow and state within an application.

This application is described as non-trivial as it intends to show patterns found in more sophisticated applications in this genre, such as:

• OAuth2 based authentication
• JWT based authorization
• "authorization-aware" routing
• infinite-scrolling
• Redux in conjunction with Promises

this application illustrates usage patterns for the following elements:

1. webpack for build
2. react for view
3. react-router for routing
4. redux for state management and data-flow
5. babel for es-next syntax
6. bootstrap for css styling
7. axios for promise based http requests
8. hellojs for client-side authentication via oauth
9. jwt-decode for decoding jwt tokens
10. react-waypoint for react style infinite-scroll
11. json-server for mock server api's

this application also illustrates use of the following redux-centric add-ons:

1. redux-actions for idiomatic generation of redux actions and reducers
2. redux-thunk middleware for handling function based actions
3. redux-promise middleware for handling promise based actions
4. redux-logger middleware for logging redux state changes to console
5. redux-simple-router for integrating router state with redux
6. redux-devtools for improving the redux developer-experience (DX)
7. redux-form for managing form state in redux store

directions

1. git clone https://github.com/tony-kerz/redux-scratch
2. cd redux-scratch
3. npm install
4. npm run generate-mock-data
5. npm run dev-mock
6. visit http://localhost:8080 in browser

notes

• this was built using Node >= 5.x and NPM >= 3.x
• redux-devtools is hidden by default, but hit ctrl-H to bring it on
• this was only tested in chrome Version 47.x so far, so YMMV in other browsers

potential future enhancements

• replace promises with observables
• support for server side rendering