Redux Libraries & Learning Material

Redux is a state container for JavaScript apps.

• Official website: devarchy.com/redux
• Use devarchy to add a library to the catalog

Contents

• Code Architecture
• Utilities
• Code Style
• Dev tools / Inspection tools
• React Integration
• Other Integrations
• Boilerplate
• Miscellaneous
• Learning Material
• Community

Code Architecture

Aims to improve the overall structure of the source code. Makes reasoning about the code easier.

• redux-schema - Automatic actions, reducers and validation for Redux.
• redux-tcomb - Immutable and type-checked state and actions for Redux.
• redux-action-tree - The Cerebral signals running with Redux.
• redux-elm - The Elm Architecture in JavaScript.

Utilities

• redux-orm - Small, simple and immutable ORM to manage relational data in your Redux store.
• redux-api-middleware - Redux middleware for calling an API.
• redux-ignore - Higher-order reducer to ignore Redux actions.
• redux-modifiers - Collection of generic functions for writing Redux reducers to operate on various data structures.
• rereduce - Reducer library for Redux.
• redux-search - Redux bindings for client-side search.
• redux-logger - Logger middleware for Redux.
• redux-immutable - Redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.
• reselect - Selector library for Redux.
• redux-requests - Manages in-flight requests with a Redux reducer to avoid issuing duplicate requests.
• redux-undo - Higher order reducer to add undo/redo functionality to Redux state containers.
• redux-bug-reporter - Bug reporter and bug playback tool for Redux.
• redux-transducers - Transducer utilities for Redux.

Store Persistence

• redux-storage - Persistence layer for Redux with flexible backends.
• redux-persist - Persist and rehydrate a Redux store.

Side Effects

Side Effects / Asynchronous Actions

• redux-saga - Alternative side effect model for Redux apps.
• redux-promise-middleware - Redux middleware for resolving and rejecting promises with conditional optimistic updates.
• redux-effects - You write pure functions, redux-effects handles the rest.
• redux-thunk - Thunk middleware for Redux.
• redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.
• redux-loop - Port of elm-effects and the Elm Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your reducers.
• redux-side-effects - Redux toolset for keeping all the side effects inside your reducers while maintaining their purity.
• redux-logic - Redux middleware for organizing business logic and action side effects.
• redux-observable - RxJS middleware for action side effects in Redux using “Epics”.
• redux-ship - Composable, testable and typable side effects.

Code Style

Aims to make parts of the source code easier to read/write.

• redux-act - Opinionated lib to create actions and reducers for Redux.
• redux-crud - Set of standard actions and reducers for Redux CRUD Applications.

Dev tools / Inspection tools

• redux-devtools-inspector - Another Redux DevTools Monitor.
• redux-diff-logger - Diff logger between states for Redux.
• redux-devtools-chart-monitor - Chart monitor for Redux DevTools.
• redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI.
• redux-devtools-dispatch - Dispatch your actions manually to test if your app Reacts well.
• redux-devtools-dock-monitor - Resizable and movable dock for Redux DevTools monitors.
• redux-devtools-filterable-log-monitor - Filterable tree view monitor for Redux DevTools.
• redux-devtools-log-monitor - The default monitor for Redux DevTools with a tree view.
• remote-redux-devtools - Redux DevTools remotely.

React Integration

• redux-test-recorder - Redux middleware to automatically generate tests for reducers through ui interaction.
• react-redux - Official React bindings for Redux.
• react-easy-universal - Universal Routing & Rendering with React & Redux was too hard. Now it's easy.
• redux-form-material-ui - Set of wrapper components to facilitate using Material UI with Redux Form.

Routing

• redux-async-connect - It allows you to request async data, store them in Redux state and connect them to your React component.
• redux-tiny-router - Router made for Redux and made for universal apps. Stop using the router as a controller, it’s just state.
• redux-router - Redux bindings for React Router – keep your router state inside your Redux store.
• react-router-redux - Ruthlessly simple bindings to keep react-router and Redux in sync.
• ground-control - Scalable reducer management & powerful data fetching for React Router & Redux.

Forms

• redux-form - Higher Order Component using react-redux to keep form state in a Redux store.
• react-redux-form - Create forms easily in React with Redux.

Component State

• redux-react-local - Local component state via Redux.
• redux-ui - Easy UI state management for React Redux.

Other Integrations

Flux

• redux-actions - Flux Standard Action utilities for Redux.
• redux-promise - FSA-compliant promise middleware for Redux.

Backbone

• backbone-redux - Easy way to keep your backbone collections and Redux store in sync.

Falcor

• redux-falcor - Connect your Redux front-end to your falcor back-end.

RxJS

• redux-observable - RxJS middleware for action side effects in Redux using “Epics”.
• rx-redux - Reimplementation of Redux using RxJS.
• redux-rx - RxJS utilities for Redux.
• redurx - Redux'ish Functional State Management using RxJS.

Electron

• redux-electron-store - Redux store enhancer that allows automatic synchronization between electron processes.

Deku

• deku-redux - Bindings for Redux in deku < v2.

Other

• redux-rollbar-middleware - Redux middleware that wraps exceptions in actions and sends them to Rollbar with current state.
• kasia - React Redux toolset for the WordPress API.

Boilerplate

Boilerplates / Scaffolds / Starter Kits / Generators / Stack Ensembles

• redux-cli - Opinionated CLI for building Redux/React apps quicker.
• reactuate - React/Redux stack (not a boilerplate kit).
• react-chrome-extension-boilerplate - Boilerplate for Chrome Extension React.js project.
• universal-redux - Npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.
• generator-react-aspnet-boilerplate - Starting point for building isomorphic React applications with ASP.NET Core 1, leveraging existing techniques.
• generator-redux - CLI tools for Redux: next-gen functional Flux/React with devtools.
• generator-react-webpack-redux - React Webpack Generator including Redux support.
• socrates - Small (8kb), batteries-included Redux store to reduce boilerplate and promote good habits.

Miscellaneous

• redux-core - Minimal Redux.

Learning Material

• Redux’s concepts

  Redux official documentation does a great job at explaining Redux’s core principles.

• Why immutable data structures

  The guide on performance of React’s official documentation explains well what immutable data structures are and why they play an important role.

• Side Effects

  Redux Loop’s readme gives a good insight on Side Effects in the context of Redux.

Reading the aforementioned material will get you a good start for writing apps with Redux. If you are curious for more, check out following resources.

• Functional Programming - Basics

  This post goes over basic concepts of functional programming while building a YouTube instant search demo app.

• Reactive Programming

  This introduction to Reactive Programming explains Reactive Programming with clarity.

• Functional Programming - Going beyond

  Well written article that talks about interesting computer science concepts implemented in functional languages and how these apply to JavaScript.

• Monads

  Curious about monads? Wikipedia gives a good overview on monads and this article explains monads in more details with graphics and simple examples.

Community

• Reddit
• Stack Overflow
• Discord
• Slack
• Gitter
• #rackt on freenode