### Redux Techniques **Related Topics**: - [Redux Reducers and Selectors](./redux-reducers-selectors.md) - [Redux UI Management](./redux-ui-management.md) #### Debugging - **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. - **Redux Logging in Production / Maximizing Debuggability in Redux** https://blog.logrocket.com/redux-logging-in-production-3b2a4816b713 https://blog.logrocket.com/maximizing-debuggability-with-redux-79b2ad07b64c A pair of articles discussing a variety of aspects and approaches for debugging Redux apps. Includes several mentions of the LogRocket service, but also covers other tools and approaches, including building your own analytics pipeline. - **Redux DevTools for Dummies** https://medium.com/@tylerwclark/redux-devtools-for-dummies-74566c597d7 An overview of the Redux DevTools Extension, including examples of how to properly add the DevTools when setting up a Redux store, and explanations of the various parts of the extension's UI. - **How to treat Errors as first-class citizen in Flux (and Redux)** https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that. - **A user encounters a JavaScript error. You'll never guess what happens next!** https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490 A walkthrough for how to capture user page interactions and dispatched Redux actions into a "journey" object that can be sent to the server if an error is detected, allowing a developer to play back the user's behavior for debugging. - **Getting the most out of Redux + Sentry** https://blog.lingoapp.com/getting-the-most-out-of-redux-sentry-ecd8c737410d Describes how to use Sentry to monitor behavior of Redux apps in production #### Other - **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 - **{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_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. - **Roll the Dice: Random Numbers in Redux** https://daveceddia.com/random-numbers-in-redux/ Some excellent examples of how "impure values" like random numbers should fit into a Redux application. - **Random in Redux** https://blog.ohlman.io/random-in-redux-b6b9932ad061 Another quick example of how to use seed values to safely generate random numbers in Redux. - **Things I learned about Redux: Don't Dispatch from React Lifecycle Methods** https://github.com/carlsverre/talk-react-redux-learnings Resources from an excellent presentation on potential timing issues that result from dispatching Redux actions in React lifecycle methods. Repo includes sample code demonstrating the issues, and a link to the video of the meetup talk. - **Manage analytics actions in React** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Discusses using Redux middleware and redux-observable to manage analytics behavior in isolation from the rest of the application. - **Using dynamic localization to improve accessibility with React and Redux** https://medium.com/checkr/using-dynamic-localization-to-improve-accessibility-with-react-and-redux-7650878af6ef Some quick examples and discussion of how Checkr uses the react-redux-i18 package to set up localization for their app. - **Evil things you do in Redux - dispatch in updating lifecycle methods** https://hackernoon.com/evil-things-you-do-with-redux-dispatch-in-updating-lifecycle-methods-ad116de882d4 Thoughts on the pros and cons of dispatching Redux actions in React lifecycle methods, such as causing cascades of re-renders and updates in other components. - **Redux and JSON Schema** https://blog.prismatik.com.au/redux-and-json-schema-c63368931143 Short discussion of the overall benefits of using JSON Schema to define data structures, and a Redux library that helps use those for Redux. - **A Simple Way to Implement Timers and Timeouts in Redux** https://spin.atomicobject.com/2017/11/20/timers-timeouts-redux/ A quick example of storing a "current time" value and timers as "expire times". - **Redux Dead Drop** https://medium.com/@erikras/redux-dead-drop-1b9573705bec Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node - **The Definitive Guide to Redux-Persist v5** https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975 An informative guide that covers setting up Redux-Persist, customizing what's persisted, and merging persisted data into the store. #### Reducing Boilerplate - **Why I created Redux-Tiles library to deal with Redux verbosity** http://blog.bloomca.me/2017/06/02/why-i-created-redux-tiles-library.html https://news.ycombinator.com/item?id=14482215 Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those. - **Reducing Redux: avoiding boilerplate with redux-scc** https://medium.com/onfido-tech/reducing-redux-avoiding-boilerplate-with-redux-scc-b72c80c338e5 https://medium.com/onfido-tech/redux-scc-update-combined-actions-and-custom-types-ce346ea91e85 Looks at how the redux-scc library allows building "store chunks", which simplify the amount of work needed to define and update a Redux store. - **Redux Action Creator Creators** https://hackernoon.com/redux-action-creator-creators-6684b051d4c6 An example of using functions that take additional arguments, and using those to generate action creators. Includes example of using this to add analytics and promises to actions. - **The only action you will ever need** https://medium.com/riipen-engineering/the-only-action-you-will-ever-need-f3a42661d2dd Looks at creating a reusable "fetch" action creator that can be customized to generate fetching logic for different REST API endpoints. - **Redux mapStateToProps and mapDispatchToProps Shorthand** https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132 A quick example of the "object shorthand" supported by `connect` for `mapDispatch`, and use of Reselect's `createStructuredSelector` for equivalent behavior of `mapState`. - **Less Redux Boilerplate with Union Types** https://codeburst.io/less-redux-boilerplate-with-union-types-3d5fd6acb53c Examples of using Elm-inspired "union types" to define Redux logic, as well as combining action creators and reducers in a single file similar to the "ducks" approach. - **ARC - Simplifying async requests in Redux apps** https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216 Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions. - **Abstracting Vuex/Redux Action Patterns** https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc Examples of generating action types and action creators that use similarly-formatted actions (such as FETCH_DATA_REQUEST/SUCCESS/ERROR). - **Stop writing mapStateToProps, start using declarative models** https://medium.com/@kyleramirez/part-1-stop-writing-mapstatetoprops-start-using-declarative-models-ce72716db9fc https://medium.com/@kyleramirez/part-2-stop-writing-mapstatetoprops-start-using-declarative-models-403734a5f9ee https://medium.com/@kyleramirez/part-3-stop-writing-mapstatetoprops-start-using-declarative-models-3eb752d811b7 Discusses a library called ReactiveRecord, which encapsulates the process of defining client-side models for REST APIs, fetching data, and reading it from the store. - **"Comments on 'reducing boilerplate'"** https://www.reddit.com/r/reactjs/comments/7069ct/i_love_redux_but_i_hate_the_boilerplate/dn1mj4s/ A great comment on what "boilerplate" actually means, how people optimize too much for initial dev time, and how Redux improves long-term maintainability. - **How to delete hundreds (or thousands) of lines of ReduxJS code** https://medium.com/@ianduvall/how-to-delete-hundreds-or-thousands-of-lines-of-reduxjs-code-4736b34f7345 Short examples of reusable action creator and reducer logic for handling "loading" state for multiple features in an app. - **Keducer - Automate writing Redux reducers with 5 lines of Javascript** https://hackernoon.com/automate-writing-redux-reducers-with-5-lines-of-javascript-cecb79fb9a35 https://www.reddit.com/r/javascript/comments/7i4t14/keducer_automate_writing_redux_reducers_with_5/ Describes a small lib to generate reducers that handle merging in updated state. Some good discussion in both the article comments and Reddit comments about the tradeoffs between having reducers "own" state, vs state being defined by action creators. - **Introducing redux-recompose** https://medium.com/wolox-driving-innovation/932e746b0198 Introduces a reducer utility library to help simplify handling of async actions - **The elegance of decorated Redux** https://blog.cloudboost.io/the-elegance-of-decorated-redux-b0bd7e2de16a Looks at using `connect` as a decorator, extracting `connect` definitions for reuse with multiple components, and combining multiple connections together to apply to a single component. - **Redux: Let's Code a Higher-Order "Duck"** https://medium.com/@yazeedb/redux-lets-code-a-higher-order-duck-a045415bef0f https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs. - **DRY Redux at Scale: The Basics** https://medium.com/@gaforres/dry-redux-at-scale-the-basics-d1dac63f5a53 Walks through a series of approaches for reducing boilerplate and abstracting generation of action creators and reducers, and discusses the pros and cons of adding additional abstraction layers. - **Reducing boilerplate in Redux Apps with Arc** https://hackernoon.com/reducing-boilerplate-in-redux-apps-with-arc-d9550434470e The author of the redux-arc library describes how it can help simplify your Redux code by generating action creators and reducers for CRUD logic. #### Network Management - **VR Redux / ReactVR Redux Revisited** http://jimpurbrick.com/2017/01/04/vr-redux/ http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ http://jimpurbrick.com/2017/11/10/replaying-replicated-redux/ A set of posts that discuss using ReactVR and Redux to implement a networked VR application, including using a Redux middleware to synchronize actions between the clients, and approaches to managing consistency and optimistic updates. - **Firebase with Redux** https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9 Examples for combining Firebase into a Redux application - **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. - **Introducing Redux Offline: Offline-First Architecture for Progresive Web Applications** https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0 An excellent blog post explaining the need for better offline behavior in web apps, and introducing a new Redux-based library that helps manage that behavior. - **Offline GraphQL Queries with Redux Offline and Apollo** http://www.east5th.co/blog/2017/07/24/offline-graphql-queries-with-redux-offline-and-apollo/ Discussion of how to use Redux Offline to enable persistance and Apollo queries of data while offline - **Redux Websocket Integration** https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture. - **What's the best way to store tokens in Redux?** https://michaelwashburnjr.com/blog/best-way-to-store-tokens-redux Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens.* - **Remote Reducers and Predictive Reduction** https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211 Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. - **React/Redux Tips: Better Way to Handle Loading Flags in Your Reducers** https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6 A quick suggestion to store loading state in its own slice reducer, rather than spread across the app state.