Redux Architecture and Best Practices
- Redux addons catalog - Apps and Examples: 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
Dan Abramov discusses the tradeoffs involved in using Redux.
You Might Not Need Redux
A similar article from Samantha Geitz, discussing when you might want to use Redux.
The Case for Flux
The author of Redux lays out reasons you might want to use a Flux-style architecture
Reasons Why I Love Redux
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
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
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
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
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.
Wordpress Calypso: Our Approach to Data
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
Describes some useful practices for organizing Redux actions, reducers, and selectors.
10 Tips for Better Redux Architecture
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?
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
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
An excellent set of guidelines for organizing your Redux store structure.
Redux Step by Step: A Simple and Robust Workflow for Real Life Apps
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
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
Some examples of component structure and data handling in a drawing app.
Switching from Backbone to React and Redux
A pair of articles describing one company's transition from a Backbone app to using React and Redux.
Black Pixel Redux Handbook
Black Pixel's guidelines for project/app structure and usage
Tips for a Better Redux Architecture: Lessons for Enterprise Scale
Thoughts on good patterns and approaches in a large Redux app, including use of action creators instead of
dispatchin components, module/container file structure, using sagas for flow control, and more.
Thinking in Redux (when all you've known is MVC)
Some useful mental comparisons for understanding Redux when coming from an MVC architecture background
React + Redux: Architecture Overview
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
Some notes on an opinionated architecture for large React/Redux applications
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
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?"
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
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
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
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
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
Guidelines for tools, component structure, file layout, and async data handling
"Redux Best Practices?"
Short but good discussion on approaches.
React-Redux Style Guide
An opinionated style guide for developing applications in ES6+ with React and/or Redux.
Redux Patterns and Anti-Patterns
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
Some tips for consistent and understandable naming of actions and action creators
Our Redux Migration (and 5 tips for adoption in a mature codebase)
Lessons learned from migrating to Redux, including choosing a directory structure nd knowing when to use Redux.
Redux without Profanity
An online book covering best practices and approaches for managing a Redux application
Taming Large React Applications with Redux
A slideshow with a number of best practices, including tips on using container components, immutable data, normalization, and more.
Real-World React and Redux
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?
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
Describes the benefits a dev team got from using RxJS streams and using selector functions to derive data.
Redux anti-pattern: dumb mapStateToProps
An analysis of a somewhat common Redux anti-pattern, where
mapStateToPropsis 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
Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries
Redux at Knewton
Discussion of how Redux helped Knewton improve their app, including dev middleware to catch accidental mutations, normalization to help with caching, and other tradeoffs.
4 Things for Efficient Redux
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
Some quick tips for working with Redux, structuring data, and encapsulation of components
Avoiding False Cause
Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates)
Isn't our code just the BEST
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
An excellent overview of why action creators exist, why they’re worth using, and when you can skip them
React Redux Design Lessons Learned
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
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
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
A couple quick suggestions for use of
connect, including connecting lower in the tree and using the
Dispatch Redux actions as events, not commands!
Some opinionated thoughts on naming and intent for Redux actions, and why actions should be treated similar to event sourcing
Some thoughts on the pros and cons of defining action constants for reuse in Redux apps, and whether it's a good idea to use libraries to help define those constants.
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
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?
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
The Rumors team describes how they've structured their Redux+Firebase application, and some of the things they ran into
Redux Architecture Guidelines
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
Some quick tips for structuring a Redux app, including several related to organizing state.
Notes from my first React + Redux project
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
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
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
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
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
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
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
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
The Slack team discusses how they use Redux in an Electron app, including use of the
electron-reduxmiddleware for syncing actions between Redux stores in different Electron processes and use of
redux-observablefor managing side effects.
Redux: Architecting and scaling a new web app at the NY Times
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"
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
A clear suggested order of steps to follow when adding new functionality to a React+Redux app.
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
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
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
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
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
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"
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
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
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
A look at one way to write encapsulated action handling in Redux
How to Reuse Redux Components
Discussion of an Elm-inspired approach to wrapping up reusable components and logic
Redux and the Elm Architecture
Redux lacks built-in abstractions for real-world, maintainable, scalable applications. In particular, it is difficult to create and distributed encapsulated, reusable components. The Elm Architecture clearly addresses some important areas where Redux alone is lacking.
Scaleable FE with Redux and Elm Architecture
Examples of using Elm-style approaches to writing Redux code
Encapsulation in Redux: the Right Way to Write Reusable Components
Examples of an Elm-style encapsulation approach
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
Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux.
Redux: Encapsulating the Redux State Tree
A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches
Redux State Keys - A predictable yet dynamic substate
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
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?"
Discussion of various approaches to the "generic list of reusable components" problem
Redux-Doghouse - Creating 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
Discussion of a small library that tries to make it easier to hook together different Redux addons.
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
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
Another article on "globalizing" selector functions, with references to the articles by Randy Coulman and Dave Atchley.
An interesting approach to the "multiple instances of a connected component" problem.
Discussion of ways to structure reducers, selectors, and other logic into reusable features
Building a simple Redux library
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
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
Selector Pattern: Painless Redux Store Destructuring
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.
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
Describes a library that can wrap up React components so they only see a portion of a Redux store
Dependency Injection in Redux
Examples of using component factories to generate connected components and allow easier testing
Variations on Redux Architectures
Redux Saga in Action
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
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
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
Demonstrates ways to use Ramda to compose together React components and Redux behavior
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
Description of a decoupled saga-based app structure, similar to that described in "Redux Saga in Action"
Minimal Redux Setup
Thoughts on using a single reducer and a single "UPDATE" action type
Scaling your Redux App with Ducks
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.
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
A look at conventions that have helped the Algolia team write Redux apps.
Ducks++: Redux Reducer Bundles
Describes an enhancement to the original "ducks" proposal, adding a string constant to help define where the state is kept in the store.
Walks through an implementation of keeping two Redux stores in sync via distributed actions over websockets.
Introducing FilterBubbler: A WebExtension built using React/Redux
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
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
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
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
A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux.
Connecting React components to a Redux store with render callbacks
Demonstrates using the React "render props" pattern to pass down data from a Redux store, rather than using
"Anyone using Redux with a render prop?"
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
A couple of discussion threads looking at the recent popularity of of experiments with
connectas a render prop.
Kea: A High Level Abstraction between React and Redux
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
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
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?"
Interesting discussion on ways to organize nested Redux-connected components for reusability.
Introducing Redux Box
Discussion of a library for generating Redux application modules.
Redux for Chrome Extensions
A detailed look at how Redux can fit into the Chrome extension architecture