Courses & TutorialsProgramming

Awesome Redux – Massive Collection of Resources

Redux is a state container for JavaScript apps.

Contents

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

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

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

Other Integrations

Flux

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

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

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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button