Redux

The Gist of Redux is a follows:

• The whole state of your app is stored in an object tree inside a single store.
• The only way to change the state tree is to emit an action, an object describing what happened.
• To specify how the actions transform the state tree, you write pure reducers.

There are better approaches to manage state in React now. Sometimes Redux can be useful perhaps.

OSS Redux apps

• NextJS + Redux template

Notes

• OwnPops is something your component receives from the parent. StateProps is something your component receives from the Redux store.
• In the app a user activity generates an event. The event handler calls the dispatch() function that is sending the current state and an action (object) to the rootReducer(). The action object contains the relevant data for the requested change of state slice. The rootReducer() will interpret the action.type, process the data and generate a new state. After the store has received the new state, it triggers the re-render of the React Redux app. It also triggers the execution of all listener functions that are registered with the subscribe() method to the store. Furthermore, all components that are subscribed with connect(mapStateToProps) to the store now receive the new state data as defined in mapStateToProps().
• You bind all the transformations on your UI to a single object. All stuff that happens on the UI is a consequence of a transformation on that object. So:
  1. You just gained undo/redo, if you track alterations on your object.
  2. You know the state of your application at all times, just looking at the object. You can also keep it and save it for later use.
• Avoid using Immutable.js in Redux apps. Use Redux Toolkit & Immer instead.
• Actions are events, not commands. An action says "this thing happened", and then anything in the store (reducers, middlwares) is allowed to do something with that knowledge. An action does not say "please do this thing".

Links

• React Redux — Concept, Workflow & Cheatsheet (2017)
• Redesigning Redux
• React Redux Style guide
• Mark Erikson - The Fundamentals of Redux
• Redux Persist - Persist and rehydrate a Redux store.
• The Suspense is Killing Redux
• Getting started with Redux course
• Erik Rasmussen | Abstracting Form State with Redux Form (2016)
• A Dummy’s Guide to Redux and Thunk in React
• redux-actions - Flux Standard Action utilities for Redux.
• Redux Ecosystem Links - Categorized list of Redux-related addons, libraries, and utilities.
• typesafe-actions - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript).
• TypeScript FSA - Type-safe action creator utilities.
• Robodux - Remove repetitive tasks from Redux.
• redux-react-hook - React hook for accessing mapped state and dispatch from a Redux store.
• Connected React Router - Redux binding for React Router.
• SoundCloud Redux - Basic SoundCloud API client built with React, Redux, and Redux Saga.
• Logux - Instead of sending HTTP requests (e.g., AJAX, REST, and GraphQL) it synchronizes log of operations between client, server, and other clients through WebSocket.
• React Hooks implementation for Redux
• Scaling a react/redux codebase for multiple platforms (2019)
• Redux Loop - Library that ports Elm's effect system to Redux.
• Redux side effects and me (2017)
• Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
• redux-bundler - Compose a Redux store out of smaller bundles of functionality.
• Redux Starter Kit - Simple set of tools to make using Redux easier.
• Redux DevTools - DevTools for Redux with hot reloading, action replay, and customizable UI.
• Redux-ORM - Small, simple and immutable ORM to manage relational data in your Redux store.
• dva - React and redux based, lightweight and elm-style framework. (Inspired by elm and choo).
• reactive-react-redux - React Redux binding with React Hooks and Proxy.
• redux-logic - Redux middleware for organizing all your business logic. Intercept actions and perform async processing.
• Re-reselect - Enhance Reselect selectors with deeper memoization and cache management.
• Redux First History - Redux history binding support react-router - @reach/router.
• Our Redux Anti Pattern - Guide to predictable scalability.
• Reasons to learn Redux as a JavaScript Developer (2019) (HN)
• Idiomatic Redux
• Is redux really a good idea? (2020)
• How To Not Have A Mess with React Hooks & Redux (2020)
• React + Redux + Comlink = Off-main-thread (2019)
• Redux Batch - Enhance your Redux store to support batched actions.
• Redux Toolkit - Official, opinionated, batteries-included toolset for efficient Redux development. (Code)
• Redux Shouldn’t Hold All Of Your Data (2019)
• Redux Thunk - Thunk middleware for Redux.
• React context vs Redux in 2020
• Entire Redux in Web Worker
• Event Driven Redux
• redux-act - Opinionated lib to create actions and reducers for Redux. The main goal is to use actions themselves as references inside the reducers rather than string constants.
• Redux-First Router - Think of your app in terms of states, not routes or components. Connect your components and just dispatch Flux Standard Actions.
• Redux Devtools: tips & tricks for faster debugging (2020)
• Value of Redux Thunks (2020)
• How UI-driven State Increases Accidental Complexity (2020) (HN)
• HN: Redux – Not Dead Yet (2020)
• Redux Actuator - Communicate between components through Redux store.
• Notes on redux design
• Dynadux - Advanced and simpler Stores based on dispatch and Reducers. Alternative to Redux.
• Why I Stopped Using Redux (2020)
• Redux Overview and Concepts (HN)
• The evil pattern of Redux that reduces boilerplate (2020)
• Redux In Web Workers: Off-Main-Thread Redux Reducers and Middleware (2020)
• Refactoring a Redux app to use Recoil (2020)
• Repluggable - Pluggable micro frontends in React+Redux apps.
• Redux is half of a pattern (2020)
• RTK Query - Data fetching and caching addon for Redux Toolkit. (Code) (Tweet)
• Functors - Redux (2020)
• Let’s Learn Modern Redux! (with Mark Erikson) (2021) (Code)
• Stop using the “container/presentational” pattern in Redux (2021) (Reddit)
• Typed Redux Saga - Better TypeScript typing in redux-saga.
• Why Redux isn't good any more (2021)
• localfirst/state - Automatically replicated Redux store that gives your app offline capabilities and secure peer-to-peer synchronization superpowers.
• Is Redux still recommended in 2021?
• Redux Toolkit Query vs React Query (2021) (Tweet)
• use-redux-effect - Powerful React hook that subscribes to Redux store events.
• Should you use Redux still (2021)
• Confidently Testing Redux Applications with Jest & TypeScript (2021)
• How do you know if a project will need Redux? (2022)
• Should we be teaching Redux in 2022?
• Redux Toolkit v1.8: new "listener" side effects middleware (Reddit)
• Redux is pointless when using react query / Apollo client / swr
• Writing Redux Reducers in Rust (2022) (Reddit)
• Offline with Redux - Different (service worker free) approach to offline web apps.