redux-techniques.md

Redux Techniques

Debugging

• Hot reloading and time travel debugging: what are they?
  https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35
  A short but informative article describing these concepts and why they're useful.

• Debugging is in Flux
  https://vimeo.com/166342150
  A fantastic talk that demonstrates use cases and examples for time-travel debugging in a Flux-style architecture, including crash reporting. The demo is built in Alt, but obviously completely applies to Redux as well.

• Drew Bug
  https://www.youtube.com/watch?v=n8vkg_RVIRo
  A video demonstrating a Redux crash reporter and time travel debugger.

• Redux DevTools Without Redux
  https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f
  Instructions on setting up the Redux DevTools browser extension to use things other than a single Redux store (such as reducers for use within a React component, or other state libs)

• Redux Error Reports Concept
  https://medium.com/@jrullmann/redux-error-reports-concept-ab85b658f53e
  A semi-hypothetical description of tools that could be built to report errors by leveraging Redux

• A Quick Look at the React and Redux DevTools
  http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/
  An intro to using the React DevTools and Redux DevTools extensions for debugging

• Improve your development workflow with the Redux DevTools Extension
  https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83
  The author of the Redux DevTools extension describes new features, including "pause/locking" for iteration on behavior, and some changes needed to add it to the store.

• Time Travel in React Redux apps using the Redux DevTools
  https://onsen.io/blog/react-redux-devtools-with-time-travel/
  Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging.

Reducers

• Redux Docs: Structuring Reducers
  http://redux.js.org/docs/recipes/StructuringReducers.html
  Comprehensive information on writing reducers and structuring data, covering reducer composition, use of combineReducers, normalizing data, proper immutable updating, and more.

• "Reducer composition without slicing state"
  https://www.reddit.com/r/javascript/comments/42ey9e/redux_reducer_composition_without_slicing_state/
  Discussion of ways to organize actions and reducer logic

• Taking Advantage of combineReducers
  http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
  Examples of using combineReducers multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic.

• Modifying a Leaf of the Redux State Tree
  http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/
  Some useful observations on how to properly do deep immutable updates.

• "How to dynamically load reducers for code splitting in a Redux application?"
  http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application
  Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime

Selectors and Normalization

Related topics:

• Redux Architecture - Encapsulation

• Redux Performance

• Querying a Redux Store
  https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
  A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions.

• Normalizing Redux Stores for Maximum Code Reuse
  https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
  Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data.

• Redux Normalizr: Improve your State Management
  http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/
  A tutorial describing how to use Normalizr for improved data management of nested data in Redux

• Using normalizr.js in a Redux store
  https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux-store-96ab33991369
  Some examples of using Normalizr and selectors to manage normalized data

• Memoize-Immutable: efficient memoizer for Redux
  https://blog.prototypo.io/memoize-immutable-efficient-memoizer-for-redux-and-other-immutable-environments-59277fefa45f
  Discusses principles of immutability and memoization, and a library they built to help memoize Redux data lookups

• Two mistakes I made working with Redux
  http://www.mattzeunert.com/2016/06/01/redux-mistakes.html
  Some suggestions on how to handle denormalizing data and defining actions.

• Practical Redux: Using Redux-ORM
  http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/
  http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/
  A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques.

• "How do you add/remove to a redux store generated with normalizr?
  http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr
  Stack Overflow discussion of how to handle updates to normalized data

• "Any deep-dive/advanced tutorials on reselect?"
  https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/
  Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux mapState functions

• ReactCasts #8: Selectors in Redux
  https://www.youtube.com/watch?v=frT3to2ACCw
  A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values

• GraphQL is not only for Backend
  https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/
  A look at how to use GraphQL to query into a Redux store

• Dissecting Twitter's Redux Store
  https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1
  An informative look at the contents of the Redux store for Twitter's new mobile site

UI and Widget Implementations

• "How can I display a modal dialog in Redux?"
  http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680
  Dan Abramov describes a great technique for descriptively managing React modal dialogs using Redux actions and state, by storing names of components and their props.

• "Generic Modal Dialogs with Feature-Specific Actions"
  https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3
  A follow-on to Dan's technique, with a short suggestion for using generic modal components in a variety of situations by including actions as props.

• Implement a confirm modal using React & Redux
  http://jslancer.com/2016/08/07/implement-a-confirm-modal-using-react-redux/
  Demonstrates wrapping up an existing modal library to be controlled by Redux actions

• Implementing Search/Filter on a list in React and Redux
  https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad
  Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs.

• Creating Reusable Generic Modal Dialogs with React and Redux
  https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux
  A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled.

• Animating with React, Redux, and D3
  https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b
  Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them.

• Open Sourcing a Redux Component
  https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62
  Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports.

• Scalable Modals with React and Redux
  https://codersmind.com/scalable-modals-react-redux/
  Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer.

Redux and Forms

• Abstracted Form State with Redux-Form
  https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form
  Slides by the author of Redux-Form, discussing how forms work in plain HTML/Javascript, in React, and how the Redux-Form library can integrate them into Redux.

• React, Redux, and Redux-Form
  https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html
  Thoughts on the merits of using the Redux-Form library

• Conversational sign-up form UI with React and Redux
  http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/
  An example of form management with Redux

• Should you store your form state in Redux?
  http://goshakkk.name/should-i-put-form-state-into-redux/
  Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases.

• Writing maintainable forms with Redux
  https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35
  Some basic examples for handling validation, loading initial data, and change tracking in forms.

• Using forms in React-Redux: Tips and Tricks
  https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6
  Some helpful suggestions for using Redux-Form to manage forms in a Redux app

Other

• Connecting the Linode API to Redux with Higher-Order Functions
  https://engineering.linode.com/2016/08/17/Using-metaprogramming-in-the-manager.html
  Linode explains how they generate customized action creators and reducers to talk to different parts of their API

• A Finite State Machine Helper for Redux
  https://hackernoon.com/a-finite-state-machine-helper-for-redux-c18519643719
  Describes a small but useful library for managing state machines using Redux reducers.

• Standard actions in Redux
  https://medium.com/@jtbennett/standard-actions-in-redux-c6a415c8aea4
  A description of the Flux Standard Action specification, and how it can be used with Redux

• Redux runtime reconfiguration techniques
  https://www.youtube.com/watch?v=ZvbZTXs3Y3E
  http://redux-reconfig.surge.sh/
  http://codepen.io/vnovick/pen/pEgKww/?editors=0010#0
  Discussion and demonstration of some ways to load reducers and components at runtime.

• Secure file uploads with redux-plupload
  http://engineering.tes.com/post/secure-file-uploads/
  Some examples of how to use Redux-Plupload to manage file uploads

• Redux: Perils of Time
  http://redux-perils-of-time.surge.sh/#/?presenter
  A slideshow with some intriguing thoughts on how to manage offline experiences, cached data, and optimistic UI in a Redux app.

• {Persist}ence is Key: Using Redux-Persist to Store Your State in LocalStorage
  https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63
  A quick introduction to using redux-persist to reuse store state between page refreshes

• Immuto: Strongly Typed Redux Composition
  http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.html
  http://danielearwicker.github.io/Immuto_Working_with_React_An_Example_.html
  http://danielearwicker.github.io/Immuto_Radical_Unification.html
  http://danielearwicker.github.io/Immuto_Epilogue.html
  An interesting series of experiments in adding typed cursor-like behavior to Redux. The author appears to give up on the idea in the end, but the writing and thought process are informative.

• Using Actions in Redux the Correct Way
  http://cmichel.io/using-actions-in-redux-the-correct-way/
  An interesting trick using ES6 proxies to ensure wrong action types aren't accidentally used.

• Object Oriented Functional Programming, or, How You Can Use Classes as Redux Reducers
  https://medium.com/@ustunozgur/object-oriented-functional-programming-or-how-can-you-use-classes-as-redux-reducers-23462a5cae85
  An exploration of how to use Immutable.js Record classes with methods as Redux reducers. This is a very non-idiomatic approach, but the article is reasonably informative.

• Exploring Interaction History with Redux-DAG-History
  https://blog.atsid.com/exploring-interaction-history-d09a52a7d186
  The Microsoft Research group describes a library they built to implement a "branching" approach to application history and undo/redo capabilities.

Network Management

• Ajax Polling in React with Redux and Sagas
  http://notjoshmiller.com/ajax-polling-in-react-with-redux/
  http://notjoshmiller.com/ajax-polling-part-2-sagas/
  Covers a couple different ways to manage the logic for AJAX polling.

• Firebase with Redux
  https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9
  Examples for combining Firebase into a Redux application