### Redux Architecture and Best Practices **Related Topics**: - [Redux addons catalog - Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md): Links to various projects built with Redux, both purpose-built-examples and "real" applications, as well as several Redux usage stories #### When Should You Use Redux? - **You Might Not Need Redux** https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 Dan Abramov discusses the tradeoffs involved in using Redux. - **You Might Not Need Redux** https://blog.tighten.co/you-might-not-need-redux A similar article from Samantha Geitz, discussing when you might want to use Redux. - **The Case for Flux** https://medium.com/swlh/the-case-for-flux-379b7d1982c6#.tgrsz3zhc The author of Redux lays out reasons you might want to use a Flux-style architecture - **Reasons Why I Love Redux** https://twitter.com/jlongster/status/780879989164081152 James Longster describes his appreciation for Redux, and how its constraints force you to think through your state handling - **Why You Should Care About Flux** http://jaysoo.ca/2015/06/02/why-you-should-care-about-flux/ Describes the value in separating "reads" from "writes", and eliminating local state. Applies to Redux as well. - **Redux and Why It's Good For You** https://www.fullstackreact.com/articles/redux-with-mark-erikson/ An introduction to some benefits that Redux can give you when used in a React app, including multiple views of the same data and improved development with hot reloading. - **When to use Redux** https://medium.com/@fastphrase/when-to-use-redux-f0aa70b5b1e2 Some helpful thoughts on when you should use Redux: same app state needed in multiple components, global components that need to be accessed anywhere, too much prop passing, and more. - **When (and when not) to use Redux** https://blog.logrocket.com/when-and-when-not-to-use-redux-41807f29a7fb A useful summary of the problems Redux can help solve in React apps, the major benefits of using Redux, reasons why you might not need Redux, and the basic concepts of Redux. #### Redux Architecture - **Wordpress Calypso: Our Approach to Data** https://github.com/Automattic/wp-calypso/blob/master/docs/our-approach-to-data.md The team behind Wordpress's new admin panel looks at their migration from emitters to Flux to Redux, and describes how they organize their state tree, use selectors to extract state, run queries with components, and persist their store state through refreshes. - **So you've screwed up your Redux store - or, why Redux makes refactoring easy** https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71 Describes some useful practices for organizing Redux actions, reducers, and selectors. - **10 Tips for Better Redux Architecture** https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44 A great article covering when and why to use Redux, benefits, and several tips for a better application architecture. - **Where do I put my business logic in a React-Redux application?** https://medium.com/@jeffbski/where-do-i-put-my-business-logic-in-a-react-redux-application-9253ef91ce1 Describes several options for managing logic and async behavior (thunks, sagas, etc), and introduces a new middleware as an alternative approach - **Code Sharing Between React Native and React Web Apps** https://medium.com/the-many/code-sharing-between-react-native-and-react-web-apps-b1e1de22fc53 Describes ways to architect Redux actions and reducers in the context of a product that shares code between React Native and React Web clients - **Avoiding Accidental Complexity When Structuring Your App State** https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a An excellent set of guidelines for organizing your Redux store structure. - **Redux Step by Step: A Simple and Robust Workflow for Real Life Apps** https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 A follow-up to the "Accidental Complexity" article, discussing principles for structuring a Redux app and demonstrating how they apply to actual code. - **Things I Wish I Knew About Redux** https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0 https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/ A number of excellent tips and lessons learned after building an app with Redux. Includes info on connecting components, selecting data, and app/project structure. Additional discussion on Reddit. - **Developing component-based web apps with React and Redux** https://medium.com/@carlos_paelinck/developing-component-based-web-apps-using-react-redux-6236bc958930 Some examples of component structure and data handling in a drawing app. - **Switching from Backbone to React and Redux** https://medium.com/@royisch/moving-to-react-redux-in-baby-steps-aea0402624bf https://medium.com/@royisch/6-lessons-learned-from-going-to-production-with-react-redux-19257f6724f6 A pair of articles describing one company's transition from a Backbone app to using React and Redux. - **Tips for a Better Redux Architecture: Lessons for Enterprise Scale** https://hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f Thoughts on good patterns and approaches in a large Redux app, including use of action creators instead of `dispatch` in components, module/container file structure, using sagas for flow control, and more. - **Thinking in Redux (when all you've known is MVC)** https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133 Some useful mental comparisons for understanding Redux when coming from an MVC architecture background - **React + Redux: Architecture Overview** https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e A look at the common pieces that make up a Redux application, with some very useful diagrams to illustrate what they are and how they fit together. - **React Redux Architecture** https://github.com/hirviid/react-redux-architecture Some notes on an opinionated architecture for large React/Redux applications - **Redux for state management in large web apps** https://www.mapbox.com/blog/redux-for-state-management-in-large-web-apps/ Excellent discussion and examples of idiomatic Redux architecture, and how Mapbox applies those approaches to their Mapbox Studio application. - **Reducing our Redux Code with React Apollo** https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a Peggy Rayzis from MLS shares a detailed look at how they used the React Apollo library and GraphQL to drastically simplify their Redux application - **"I made a diagram of my first React app - do you see anything that's going to bite me?"** https://www.reddit.com/r/reactjs/comments/6ec4dz/i_made_a_diagram_of_the_design_of_my_first_react/ A Reddit thread with some excellent discussion about how Apollo and GraphQL fit into the architecture of a Redux application. - **Turning Requirements into React/Redux Code** https://decembersoft.com/posts/turning-requirements-into-react-redux-code/ Looks at a typical description of desired behavior for a loading/container component, then walks through breaking the description into requirements and shows how to implement those in React and Redux. - **Scaling React/Redux in Yahoo Finance** https://medium.com/@longho/scaling-react-redux-in-yahoo-finance-88ef9e89b55c The Yahoo Finance team describes how they've structured their React+Redux architecture, including data layers, action and state structures, use of API and analytics middleware, routing, rendering, and server-side garbage collection. - **How We're Sharing Code Between React and React Native** https://blog.smartive.ch/how-were-sharing-code-between-react-and-react-native-607cdd1f5247 A look at how Redux-based code can be shared between multiple platforms in a framework-agnostic way, with discussion on which types of code are most sharable. - **How We React at Microsoft To-Do** https://www.youtube.com/watch?v=CWxc3AYja1I A 10-minute presentation from a Microsoft engineer for how they approach connecting all of their components to Redux. #### Redux Best Practices - **Redux Best Practices** https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e Guidelines for tools, component structure, file layout, and async data handling - **"Redux Best Practices?"** https://www.reddit.com/r/javascript/comments/3p9o0j/redux_best_practices/ Short but good discussion on approaches. - **React-Redux Style Guide** https://github.com/ghengeveld/react-redux-styleguide An opinionated style guide for developing applications in ES6+ with React and/or Redux. - **Redux Patterns and Anti-Patterns** https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc Some tips for using Redux, including use of Immutable.js and structuring for action creators and reducers - **A Simple Naming Convention for Action Creators in Redux** https://decembersoft.com/posts/a-simple-naming-convention-for-action-creators-in-redux-js/ Some tips for consistent and understandable naming of actions and action creators - **Our Redux Migration (and 5 tips for adoption in a mature codebase)** https://blog.agolo.com/our-redux-migration-and-5-tips-for-adoption-in-a-mature-codebase-dc62322cb921 Lessons learned from migrating to Redux, including choosing a directory structure nd knowing when to use Redux. - **Redux without Profanity** https://tonyhb.gitbooks.io/redux-without-profanity/content/ An online book covering best practices and approaches for managing a Redux application - **Taming Large React Applications with Redux** http://slides.com/joelkanzelmeyer/taming-large-redux-apps#/ A slideshow with a number of best practices, including tips on using container components, immutable data, normalization, and more. - **Real-World React and Redux** https://dzone.com/articles/real-world-reactjs-and-redux-part-1 https://dzone.com/articles/real-world-reactjs-and-redux-part-2 A series of articles covering practical architecture lessons learned from building Redux apps, especially regarding use of custom middleware - **Idiomatic Redux: Why Use Action Creators?** http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ Thoughts on why consistent use of action creators is a good practice, as opposed to putting logic inline into components. - **Seven Months into Redux: Two Things My Team Learned Along the Way** https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61 Describes the benefits a dev team got from using RxJS streams and using selector functions to derive data. - **Redux anti-pattern: dumb mapStateToProps** http://goshakkk.name/redux-antipattern-mapstatetoprops/ An analysis of a somewhat common Redux anti-pattern, where `mapStateToProps` is doing too little, shifting all the domain knowledge into the component that should not be aware of it. - **Learning and scaling a React/Redux app with a distributed team** https://devblog.xero.com/learning-and-scaling-a-react-redux-app-with-a-distributed-team-e4c397def187 Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries - **4 Things for Efficient Redux** https://medium.com/@iJaniashvili/4-things-for-efficient-redux-17e87b4cd6cb Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions. - **A Year of Development with Redux** https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d https://blog.shakacode.com/a-year-of-development-with-redux-part-ii-3035ff0b1781 Some quick tips for working with Redux, structuring data, and encapsulation of components - **Isn't our code just the BEST** https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9 A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization - **When to Define Action Creators in Redux** https://daveceddia.com/redux-action-creators/ An excellent overview of why action creators exist, why they’re worth using, and when you can skip them - **React Redux Design Lessons Learned** http://www.jeremyzerr.com/sites/default/files/React-Redux-Design-Lessons-Learned.pdf A slideshow that coves some core React and Redux concepts, then discuses how the authors approached designing and developing a timesheet application - **3 Things I Learned about Working with Data in Redux** https://dev.bleacherreport.com/3-things-i-learned-about-working-with-data-in-redux-5fa0d5f89c8b https://www.reddit.com/r/reactjs/comments/5wgh9a/3_things_i_learned_about_working_with_data_in/ Good practices for keeping UI state in components, using Higher-Order Components for reusability, and connecting multiple components at lower levels of the application - **Some tips for getting started with Redux** https://medium.com/@dave.draper20/some-tips-for-getting-started-with-redux-187fa949c0e8 Some excellent suggestions for getting into Redux, including not using it until you need it, use of `connect`, and making sure to call functions that were passed down as props. - **Quick Redux tips for connecting your React components** https://medium.com/dailyjs/quick-redux-tips-for-connecting-your-react-components-e08da72f5b3 A couple quick suggestions for use of `connect`, including connecting lower in the tree and using the `renderCountProp` option - **Dispatch Redux actions as events, not commands!** https://hackernoon.com/dispatch-redux-actions-as-events-not-commands-4de8a92b1ea5 Some opinionated thoughts on naming and intent for Redux actions, and why actions should be treated similar to event sourcing - **Is using a mix of Redux state and React local component state ok?** http://blog.jakoblind.no/2017/02/08/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/ A short article expanding on the rules of thumb for when to use Redux state given in the Redux FAQ, with some examples for each rule of thumb. - **Five Tips for Working with Redux in Large Applications** https://medium.com/appnexus-tech/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb Useful suggestions for architecting Redux apps, include use of indices / lookup tables, separation of state, and reuse of common reducer logic. - **React State vs Redux State: When and Why?** https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/ Some helpful suggestions on how to categorize state into short/medium/long-term, and how to decide where that state should live - **React Native, Redux, and Firebase for experts, by dummies** https://medium.com/rumors/react-native-redux-and-firebase-for-experts-by-dummies-6376becdd5c8 The Rumors team describes how they've structured their Redux+Firebase application, and some of the things they ran into - **Redux Architecture Guidelines** http://joeellis.la/redux-architecture/ Several useful tips for building a good Redux app, including planning state shape, avoiding nesting, storing plain data, and more. - **Getting started in React with Redux** https://medium.com/@simonhfrost/getting-started-in-react-with-redux-8b2b42b66dee Some quick tips for structuring a Redux app, including several related to organizing state. - **Notes from my first React + Redux project** https://medium.com/audelabs/notes-from-my-first-react-redux-project-3f799beeb140 A recap of how the author built a front end for a complex online payment site. Doesn't really have specific suggestions, but it's well written and serves as a useful description of the common libraries and tools in a React+Redux app and how they fit together. - **Journey of a Thousand Ducks** https://tech.iheart.com/video-journey-of-a-thousand-ducks-f0bb1a9b982c Devs from the iHeartRadio web team describe how they have approached refactoring their React app with homegrown state management to use Redux. - **React+Redux: Tips and Best Practices for Clean, Reliable, & Maintainable Code** https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code An excellent slideshow with a wide variety of tips and suggestions, including keeping action creators simple and data manipulation in reducers, abstracting away API calls, avoiding spreading props, and more. - **Why not to store objects in Redux** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Some quick thoughts on why you should keep plain JS objects in your store, instead of class instances. - **10 Redux tips to scale your dev team** https://blog.matters.tech/10-redux-tips-from-the-trenches-55e06ed1c0a8 Some excellent suggestions for helping larger dev teams use Redux successfully, including planning traing/docs reading time, generalizing action types, normalizing state, and more. - **Scaling Redux: Codebase Organization and Organizing State** https://medium.com/@uttamkini/scaling-redux-part-1-codebase-organization-80f978cd8a72 https://medium.com/@uttamkini/scaling-redux-part-2-organizing-state-8a1c5e8fffbf Several suggestions for managing a Redux codebase, including use of feature folders / ducks, separating data and UI state in the store, organizing data by API structure, and more. - **Tips for success with React and Redux** https://medium.com/@AlexFaunt/tips-for-success-with-react-and-redux-b782c6b22ff0 Advice on how much of your React component tree should be connected to Redux, using non-HTML components to manage things like document titles, consistently using actions for app behavior, and moving app logic out of components. - **Chart the Stock Market with React, Redux, React-Vis, and Socket.io** https://medium.com/@ddcreationstudi/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c An overview of approaches used and lessons learned in writing a real-time stock market charting example app. Not a tutorial specifically, but some useful ideas for structuring things. - **Growing Pains: Migrating Slack's Desktop App to BrowserView** https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview-2759690d9c7b The Slack team discusses how they use Redux in an Electron app, including use of the `electron-redux` middleware for syncing actions between Redux stores in different Electron processes and use of `redux-observable` for managing side effects. - **Redux: Architecting and scaling a new web app at the NY Times** https://www.youtube.com/watch?v=lI3IcjFg9Wk A talk from an NY Times developer describing how they scaled a React+Redux app to over a million users per month. - **"React and Redux as a framework"** https://www.reddit.com/r/javascript/comments/747vx1/react_and_redux_as_a_framework/ Useful discussion of where "business logic" should live in a Redux app, such as data fetching and transformation. - **How to approach making changes to an existing React-Redux application** https://gautamdhameja.com/how-to-approach-making-changes-to-an-existing-react-redux-application-ae00482c0f9a A clear suggested order of steps to follow when adding new functionality to a React+Redux app. - **Tips for Redux** https://www.yihangho.com/tips-for-redux/ Some excellent tips for working with Redux, including designing the state tree, dealing with side effects, implementing optimistic updates, and more. - **How We Built Our UI** https://www.endgame.com/blog/technical-blog/how-we-built-our-ui The Endgame team discusses why they rebuilt their app's UI, why they picked React and Redux, use of REdux-Saga to manage business logic, and how the data workflow fits together. - **Best practices with React and Redux application development** https://developers.redhat.com/blog/2017/11/15/best-practices-react-redux-web-application-development/ A wide variety of suggestions, including use of TypeScript, customizing build configurations, managing dependencies, handling callbacks with params, using selectors, and more. - **How Bitmovin used React/Redux to Develop Its New Dashboard** https://bitmovin.com/bitmovin-used-reactredux-to-develop-new-dashboard/ The Bitmovin team describes their React+Redux architecture, including how they approached organizing Redux actions. - **What I've learned from a few large-scale React and Redux projects** https://medium.com/20spokes-whiteboard/what-ive-learned-from-a-few-large-scale-react-and-redux-projects-d454000da167 Some short thoughts on best practices from using React and Redux, including ensuring all logic is tested, having descriptive Redux actions that tell a story, and ensuring React components are understandable by using prop types. - **Redux Anti-Patterns: State Management** http://blog.mgechev.com/2017/12/07/redux-anti-patterns-race-conditions-state-management-duplication/ Some good descriptions of common anti-patterns in Redux apps, with examples and solutions. Looks at state duplication, state ownership, and handling of state updates. - **"So much to learn about organizing Redux state by looking at popular apps"** https://mobile.twitter.com/tharakawj/status/937285802287124480 A tweet with screenshots of the Redux DevTools, showing the contents of Redux stores from Twitter and Pinterest. - **5 Strategies to Prevent Bugs in a Large Redux Codebase** https://decembersoft.com/posts/5-strategies-to-prevent-bugs-in-a-large-redux-codebase/ Short but useful thoughts on using testing, static typing, immutability, parameter validation, and code reviews with Redux apps. #### Encapsulation and Reusability **Related topics**: [Redux Techniques - Selectors](./redux-techniques.md#selectors-and-normalization) - **Scalable Frontend with Elm or Redux** https://github.com/slorber/scalable-frontend-with-elm-or-redux A repo containing ongoing discussion about ways to handle fully encapsulated reusable chunks of logic and components in Redux, with a number of submitted approaches being compared. - **Encapsulation in Redux: the Right Way to Write Reusable Components** http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/ A look at one way to write encapsulated action handling in Redux - **How to Reuse Redux Components** https://medium.com/@MattiaManzati/how-to-reuse-redux-components-8acd5b4d376a Discussion of an Elm-inspired approach to wrapping up reusable components and logic - **Scaleable FE with Redux and Elm Architecture** https://medium.com/@hunterbmt/scaleable-fe-with-redux-and-elm-architecture-c6812ed0125e Examples of using Elm-style approaches to writing Redux code - **Encapsulation in Redux: the Right Way to Write Reusable Components** http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/ Examples of an Elm-style encapsulation approach - **The Problem with Redux... And How to Fix It** http://blog.javascripting.com/2016/05/21/the-problem-with-redux-and-how-to-fix-it/ Demonstration of Redux-Elm, a library that adds composable actions to Redux - **Applying Redux Reducers to Arrays** http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux. - **Redux: Encapsulating the Redux State Tree** http://randycoulman.com//blog/2016/09/13/encapsulating-the-redux-state-tree/ http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/ http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/ http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors http://randycoulman.com/blog/2018/06/12/solving-circular-dependencies-in-modular-redux/ A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches. The last post is a follow-up to the earlier posts in the series, looking at a different approach that he feels works out better. - **Redux State Keys - A predictable yet dynamic substate** http://www.robinwieruch.de/redux-state-keys/ Description of an approach for dividing up domain-specific state from abstract state, and reusing logic based on those slices. - **The Power of Higher-Order Reducers** http://slides.com/omnidan/hor#/ A set of slides discussing how reducers can be layered together to add capabilities - **Redux Issue #822: "How to create a generic list as a reducer?"** https://github.com/reactjs/redux/issues/822 Discussion of various approaches to the "generic list of reusable components" problem - **Redux-Doghouse - Creating React-Redux Components through Scoping** http://engineering.datadoghq.com/redux-doghouse--creating-reusable-react-redux-components-through-scoping/ A look at some of the issues involved in trying to write reusable connected components that can be instantiated many times, and how the library they wrote helps solve those problems. - **Redux Stack: Modular Redux Configuration** https://medium.com/@jondot/redux-stack-modular-redux-configuration-ec96412a2262 Discussion of a small library that tries to make it easier to hook together different Redux addons. - **Scoped Selectors for Redux Modules** http://www.datchley.name/scoped-selectors-for-redux-modules/ A follow-on to Randy Coulman's series on local vs global selectors, discussing tradeoffs in approaches for defining and managing selectors. - **Scaling React and Redux at IOOF** http://www.slideshare.net/VivianFarrell/scaling-react-and-redux-at-ioof A slideshow discussing creation of enterprise-scale Redux apps built with "micro-frontends" that can be composed together, and a look at a "Redux-Subspace" library to help with that - **Structuring Redux Selectors** http://cmichel.io/redux-selectors-structure/ Another article on "globalizing" selector functions, with references to the articles by Randy Coulman and Dave Atchley. - **Instance Reducers** http://www.thesoftwaresimpleton.com/blog/2016/12/20/instance-reducers/ An interesting approach to the "multiple instances of a connected component" problem. - **How to use Redux on highly scalable Javascript applications?** https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38 Discussion of ways to structure reducers, selectors, and other logic into reusable features - **Building a simple Redux library** https://medium.com/@tcclevela/building-a-simple-redux-library-44ce4f004822 Looks at important steps to follow when building a Redux addon library: only use middleware if really needed, keep things simple, and encapsulate abstractions. Shows a particularly good example of using selectors in the library to encapsulate state lookups, and allowing the end user to initialize the selectors so that the data can be mounted anywhere in the state tree the user wants. - **Namespacing Actions for Redux** https://kickstarter.engineering/namespacing-actions-for-redux-d9b55a88b1b1 Looks at ways to namespace actions so that multiple copies of components and logic can work in an isolated manner, especially in conjunction with the `redux-loop` library. - **Selector Pattern: Painless Redux Store Destructuring** https://hackernoon.com/selector-pattern-painless-redux-store-destructuring-bfc26b72b9ae Good examples of creating encapsulated selectors that are given just their slice of state as arguments, with a centralized definition of how the state slices map to those selectors. - **Fractal Architecture** http://antontelesh.github.io/architecture/2016/03/16/fractal-architecture.html Discesses some rules of fractal architecture, looks at how those apply to React, Elm, and Cycle, and then describes ways to apply those rules to Redux code to enforce modularity. - **Restate - the store of Redux Tree** https://medium.com/@antonkorzunov/restate-the-story-of-redux-tree-27d8c5d1040a https://medium.com/@antonkorzunov/the-state-of-the-state-of-the-state-f93c8bdc6b1b Describes a library that can wrap up React components so they only see a portion of a Redux store - **Dependency Injection in Redux** https://www.codesai.com/2017/04/dependency-injection-react-redux Examples of using component factories to generate connected components and allow easier testing #### Variations on Redux Architectures - **Redux Saga in Action** https://medium.com/@totaldis/redux-saga-in-action-s-f7d11cffa35a Some interesting thoughts on ways to organize the majority of your app's logic using redux-saga - **redux-scuttlebutt; eventually consistent shared state among peers** https://medium.com/@grrowl/redux-scuttlebutt-eventually-consistent-shared-state-among-peers-191d48102079 Describes how to use the Redux-Scuttlebutt library to sync actions and updates between multiple instances of a Redux application - **Write Better Redux with redux-module-builder** https://www.fullstackreact.com/articles/better-redux-module-management/ Describes how to use the utilities included in the redux-module-builder package to better organize a Redux application - **The Elegance of React, Redux, and Ramda** https://medium.com/javascript-inside/the-elegance-of-react-ebc21a2dcd19 Demonstrates ways to use Ramda to compose together React components and Redux behavior - **Extreme Decoupling: React, Redux, Selectors** http://www.thinkloop.com/article/extreme-decoupling-react-redux-selectors/ Discusses an API-first approach to splitting apart a Redux app into view, state, and integration layers. - **Using React(-Native) with Redux and Redux Saga** https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f Description of a decoupled saga-based app structure, similar to that described in "Redux Saga in Action" - **Minimal Redux Setup** https://medium.com/@benevolentNinja/minimal-redux-setup-e6a10fcbcb68 Thoughts on using a single reducer and a single "UPDATE" action type - **Scaling your Redux App with Ducks** https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file. - **Implementing Redux is tedious. But it doesn't have to be.** https://medium.com/@jeswin/implementing-redux-is-tedious-but-it-doesnt-have-to-be-33702a1fb1dd Describes another "minimal Redux" variation. Definitely not "idiomatic Redux" usage, but a technically valid implementation. Some discussion of tradeoffs in the comments. - **How we reduced boilerplate and handled asynchronous actions with Redux** https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ A look at conventions that have helped the Algolia team write Redux apps. - **Ducks++: Redux Reducer Bundles** https://medium.com/@DjamelH/ducks-redux-reducer-bundles-44267f080d22 Describes an enhancement to the original "ducks" proposal, adding a string constant to help define where the state is kept in the store. - **Isomorphic Redux** https://medium.com/@ellisande_poet/isomorphic-redux-fdaadea13bb5 Walks through an implementation of keeping two Redux stores in sync via distributed actions over websockets. - **Introducing FilterBubbler: A WebExtension built using React/Redux** https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/ Describes how the authors built a browser WebExtension that uses the Redux-WebExt bridge as part of the implementation. - **Scaling Redux for real-life applications** https://hackernoon.com/scaling-redux-for-real-life-applications-be18c731a54d Describes a variation of the "ducks" structure that divides code into "basic concepts" that contain app state and minimal logic, and "container concepts" that contain minimal data and implement most application logic. - **Agile Front End Enterprise Architecture with React, Redux, and Vanilla JS** https://medium.com/shiftgig-blog/agile-front-end-architectures-with-react-redux-and-vanilla-js-23f4e5626e01 A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services. - **NgRx: Patterns and Techniques** https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5 Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular). The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well. - **MVC implemented by React and Causality-Redux** https://medium.com/dailyjs/mvc-implemented-by-react-and-causality-redux-c4125a01e95c https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. - **"Anyone using Redux with a render prop?"** https://twitter.com/threepointone/status/913701233394900992 A Twitter thread discussing use of render props as an alternative to `connect`. Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes. - **"Redux Connect as render props" discussion** https://news.ycombinator.com/item?id=15427954 https://twitter.com/mjackson/status/915335846324092930 A couple of discussion threads looking at the recent popularity of of experiments with `connect` as a render prop. - **Kea: A High Level Abstraction between React and Redux** https://medium.com/@mariusandra/kea-vs-setstate-redux-mobx-dva-jumpstate-apollo-etc-4aa26ea11d02 https://survivejs.com/blog/kea-interview/ An article by the author of the Kea library discussing how it makes it easier to use React and Redux together, and an interview with the author discussing the history and usage of the library. - **The joy of React+Redux with Elixir/OTP** https://limenius.com/elixir-otp-react-redux/ Covers building a Redux-based client that receives update messages from an Elixir server. - **Reslice - Yet Another Way of Managing Scale in React and Redux** https://medium.com/@mike.es6.programmer/reslice-yet-another-way-of-managing-scale-in-react-and-redux-223971139d6b Discusses the Reslice toolkit, how it wraps up Redux+Reselect+React-Redux, and how it differs from a standard React+Redux architecture. - **"How to deal with dumb Redux views that import containers?"** https://www.reddit.com/r/javascript/comments/7eavyx/how_to_deal_with_dumb_redux_views_that_import/ Interesting discussion on ways to organize nested Redux-connected components for reusability. - **Introducing Redux Box** https://medium.com/@anish000kumar/introducing-redux-box-99e3d2134ab6 Discussion of a library for generating Redux application modules. - **Redux for Chrome Extensions** https://robots.thoughtbot.com/redux-for-chrome-extensions A detailed look at how Redux can fit into the Chrome extension architecture