A non-trivial (yet simple) redux + react-router example problem.
Create an app with a dynamic and searchable list of data that keeps a search input text query in sync with the URL via a query parameter at all times. Assume the data will be fetched from some API and the API will perform the actual search. The query should be a simple string and kept in sync with the URL via a query parameter 'q' (ex. localhost:3000/?q=batman).
This problem is harder than it first appears, actions must be managed in the correct order, and if not can result in infinite loops and other undesirable behavior.
- Hit the API once and only once per query change.
- When the query updates -> update the URL and fetch results from the API.
- When the URL updates -> update the query and fetch results from the API.
- The browser's back / forward buttons should keep the app state (query + results) in sync with the URL (this is a gotcha if not thought about carefully).
- No optimizations (like caching previous queries) should be made, however the app should not be designed in a way that prevents this.
- As a bonus handle the concurrent actions issue (see the redux-saga-solution, the cyclejs-solution, and the better-observable-solution) - "If the user changes the query input while there is still a pending request from a previous query change, the current pending request should be cancelled and a new request should be made." - Thanks @yelouafi
Solutions are in their own subdirectories above. Check out the README files in each of the subdirectories for example specific details.
Many have similar structures (identical store state + hitting the same mock API). The difference being when and where the apps read router state and when and where the apps dispatch actions.
First clone the repo.
git clone https://github.com/DerekCuevas/friend-list.gitThen cd into an example, 'npm install' and 'npm start' to get going.
cd friend-list/imperative-solution/ # or the others
npm install
npm startPlease make an issue or send in a pull request.