awesome-awesomeness/html/redux.html

<h1 id="redux-libraries-learning-material-awesome">Redux Libraries &amp;
Learning Material <a href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></h1>
<p><a
href="http://redux.js.org/"><img src="https://rawgit.com/brillout/awesome-redux/master/redux-logo.svg" align="right" width="110"></a></p>
<blockquote>
<p>Redux is a state container for JavaScript apps.</p>
</blockquote>
<ul>
<li>Official website: <a
href="https://devarchy.com/redux"><code>devarchy.com/redux</code></a></li>
<li>Use devarchy to add a library to the catalog</li>
</ul>
<p><br/></p>
<h4 id="contents">Contents</h4>
<ul>
<li><a href="#code-architecture">Code Architecture</a></li>
<li><a href="#utilities">Utilities</a></li>
<li><a href="#code-style">Code Style</a></li>
<li><a href="#dev-tools--inspection-tools">Dev tools / Inspection
tools</a></li>
<li><a href="#react-integration">React Integration</a></li>
<li><a href="#other-integrations">Other Integrations</a></li>
<li><a href="#boilerplate">Boilerplate</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
<li><a href="#learning-material">Learning Material</a></li>
<li><a href="#community">Community</a></li>
</ul>
<p><br/></p>
<h2 id="code-architecture">Code Architecture</h2>
<p><em>Aims to improve the overall structure of the source code. Makes
reasoning about the code easier.</em></p>
<ul>
<li><a href="https://github.com/ddsol/redux-schema">redux-schema</a> -
Automatic actions, reducers and validation for Redux.</li>
<li><a href="https://github.com/gcanti/redux-tcomb">redux-tcomb</a> -
Immutable and type-checked state and actions for Redux.</li>
<li><a
href="https://github.com/cerebral/redux-action-tree">redux-action-tree</a>
- The Cerebral signals running with Redux.</li>
<li><a href="https://github.com/salsita/redux-elm">redux-elm</a> - The
Elm Architecture in JavaScript.</li>
</ul>
<h2 id="utilities">Utilities</h2>
<ul>
<li><a href="https://github.com/tommikaikkonen/redux-orm">redux-orm</a>
- Small, simple and immutable ORM to manage relational data in your
Redux store.</li>
<li><a
href="https://github.com/agraboso/redux-api-middleware">redux-api-middleware</a>
- Redux middleware for calling an API.</li>
<li><a href="https://github.com/omnidan/redux-ignore">redux-ignore</a> -
Higher-order reducer to ignore Redux actions.</li>
<li><a
href="https://github.com/calvinfroedge/redux-modifiers">redux-modifiers</a>
- Collection of generic functions for writing Redux reducers to operate
on various data structures.</li>
<li><a href="https://github.com/slorber/rereduce">rereduce</a> - Reducer
library for Redux.</li>
<li><a
href="https://github.com/treasure-data/redux-search">redux-search</a> -
Redux bindings for client-side search.</li>
<li><a
href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a> -
Logger middleware for Redux.</li>
<li><a
href="https://github.com/gajus/redux-immutable">redux-immutable</a> -
Redux-immutable is used to create an equivalent function of Redux
combineReducers that works with Immutable.js state.</li>
<li><a href="https://github.com/reactjs/reselect">reselect</a> -
Selector library for Redux.</li>
<li><a
href="https://github.com/idolize/redux-requests">redux-requests</a> -
Manages in-flight requests with a Redux reducer to avoid issuing
duplicate requests.</li>
<li><a href="https://github.com/omnidan/redux-undo">redux-undo</a> -
Higher order reducer to add undo/redo functionality to Redux state
containers.</li>
<li><a
href="https://github.com/dtschust/redux-bug-reporter">redux-bug-reporter</a>
- Bug reporter and bug playback tool for Redux.</li>
<li><a
href="https://github.com/acdlite/redux-transducers">redux-transducers</a>
- Transducer utilities for Redux.</li>
</ul>
<h3 id="store-persistence">Store Persistence</h3>
<ul>
<li><a
href="https://github.com/michaelcontento/redux-storage">redux-storage</a>
- Persistence layer for Redux with flexible backends.</li>
<li><a href="https://github.com/rt2zz/redux-persist">redux-persist</a> -
Persist and rehydrate a Redux store.</li>
</ul>
<h3 id="side-effects">Side Effects</h3>
<p><em>Side Effects / Asynchronous Actions</em></p>
<ul>
<li><a href="https://github.com/yelouafi/redux-saga">redux-saga</a> -
Alternative side effect model for Redux apps.</li>
<li><a
href="https://github.com/pburtchaell/redux-promise-middleware">redux-promise-middleware</a>
- Redux middleware for resolving and rejecting promises with conditional
optimistic updates.</li>
<li><a
href="https://github.com/redux-effects/redux-effects">redux-effects</a>
- You write pure functions, redux-effects handles the rest.</li>
<li><a href="https://github.com/gaearon/redux-thunk">redux-thunk</a> -
Thunk middleware for Redux.</li>
<li><a
href="https://github.com/makeomatic/redux-connect">redux-connect</a> -
Provides decorator for resolving async props in react-router, extremely
useful for handling server-side rendering in React.</li>
<li><a href="https://github.com/redux-loop/redux-loop">redux-loop</a> -
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.</li>
<li><a
href="https://github.com/salsita/redux-side-effects">redux-side-effects</a>
- Redux toolset for keeping all the side effects inside your reducers
while maintaining their purity.</li>
<li><a href="https://github.com/jeffbski/redux-logic">redux-logic</a> -
Redux middleware for organizing business logic and action side
effects.</li>
<li><a
href="https://github.com/redux-observable/redux-observable">redux-observable</a>
- RxJS middleware for action side effects in Redux using "Epics".</li>
<li><a href="https://github.com/clarus/redux-ship">redux-ship</a> -
Composable, testable and typable side effects.</li>
</ul>
<h2 id="code-style">Code Style</h2>
<p><em>Aims to make parts of the source code easier to
read/write.</em></p>
<ul>
<li><a href="https://github.com/pauldijou/redux-act">redux-act</a> -
Opinionated lib to create actions and reducers for Redux.</li>
<li><a href="https://github.com/Versent/redux-crud">redux-crud</a> - Set
of standard actions and reducers for Redux CRUD Applications.</li>
</ul>
<h2 id="dev-tools-inspection-tools">Dev tools / Inspection tools</h2>
<ul>
<li><a
href="https://github.com/alexkuz/redux-devtools-inspector">redux-devtools-inspector</a>
- Another Redux DevTools Monitor.</li>
<li><a
href="https://github.com/fcomb/redux-diff-logger">redux-diff-logger</a>
- Diff logger between states for Redux.</li>
<li><a
href="https://github.com/romseguy/redux-devtools-chart-monitor">redux-devtools-chart-monitor</a>
- Chart monitor for Redux DevTools.</li>
<li><a
href="https://github.com/gaearon/redux-devtools">redux-devtools</a> -
DevTools for Redux with hot reloading, action replay, and customizable
UI.</li>
<li><a
href="https://github.com/YoruNoHikage/redux-devtools-dispatch">redux-devtools-dispatch</a>
- Dispatch your actions manually to test if your app Reacts well.</li>
<li><a
href="https://github.com/gaearon/redux-devtools-dock-monitor">redux-devtools-dock-monitor</a>
- Resizable and movable dock for Redux DevTools monitors.</li>
<li><a
href="https://github.com/bvaughn/redux-devtools-filterable-log-monitor">redux-devtools-filterable-log-monitor</a>
- Filterable tree view monitor for Redux DevTools.</li>
<li><a
href="https://github.com/gaearon/redux-devtools-log-monitor">redux-devtools-log-monitor</a>
- The default monitor for Redux DevTools with a tree view.</li>
<li><a
href="https://github.com/zalmoxisus/remote-redux-devtools">remote-redux-devtools</a>
- Redux DevTools remotely.</li>
</ul>
<h2 id="react-integration">React Integration</h2>
<ul>
<li><a
href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a>
- Redux middleware to automatically generate tests for reducers through
ui interaction.</li>
<li><a href="https://github.com/reactjs/react-redux">react-redux</a> -
Official React bindings for Redux.</li>
<li><a
href="https://github.com/keystonejs/react-easy-universal">react-easy-universal</a>
- Universal Routing &amp; Rendering with React &amp; Redux was too hard.
Now it's easy.</li>
<li><a
href="https://github.com/erikras/redux-form-material-ui">redux-form-material-ui</a>
- Set of wrapper components to facilitate using Material UI with Redux
Form.</li>
</ul>
<h3 id="routing">Routing</h3>
<ul>
<li><a
href="https://github.com/Rezonans/redux-async-connect">redux-async-connect</a>
- It allows you to request async data, store them in Redux state and
connect them to your React component.</li>
<li><a
href="https://github.com/Agamennon/redux-tiny-router">redux-tiny-router</a>
- Router made for Redux and made for universal apps. Stop using the
router as a controller, it’s just state.</li>
<li><a href="https://github.com/acdlite/redux-router">redux-router</a> -
Redux bindings for React Router – keep your router state inside your
Redux store.</li>
<li><a
href="https://github.com/reactjs/react-router-redux">react-router-redux</a>
- Ruthlessly simple bindings to keep react-router and Redux in
sync.</li>
<li><a
href="https://github.com/raisemarketplace/ground-control">ground-control</a>
- Scalable reducer management &amp; powerful data fetching for React
Router &amp; Redux.</li>
</ul>
<h3 id="forms">Forms</h3>
<ul>
<li><a href="https://github.com/erikras/redux-form">redux-form</a> -
Higher Order Component using react-redux to keep form state in a Redux
store.</li>
<li><a
href="https://github.com/davidkpiano/react-redux-form">react-redux-form</a>
- Create forms easily in React with Redux.</li>
</ul>
<h3 id="component-state">Component State</h3>
<ul>
<li><a
href="https://github.com/threepointone/redux-react-local">redux-react-local</a>
- Local component state via Redux.</li>
<li><a href="https://github.com/tonyhb/redux-ui">redux-ui</a> - Easy UI
state management for React Redux.</li>
</ul>
<h2 id="other-integrations">Other Integrations</h2>
<h3 id="flux">Flux</h3>
<ul>
<li><a href="https://github.com/acdlite/redux-actions">redux-actions</a>
- Flux Standard Action utilities for Redux.</li>
<li><a href="https://github.com/acdlite/redux-promise">redux-promise</a>
- FSA-compliant promise middleware for Redux.</li>
</ul>
<h3 id="backbone">Backbone</h3>
<ul>
<li><a
href="https://github.com/redbooth/backbone-redux">backbone-redux</a> -
Easy way to keep your backbone collections and Redux store in sync.</li>
</ul>
<h3 id="falcor">Falcor</h3>
<ul>
<li><a href="https://github.com/ekosz/redux-falcor">redux-falcor</a> -
Connect your Redux front-end to your falcor back-end.</li>
</ul>
<h3 id="rxjs">RxJS</h3>
<ul>
<li><a
href="https://github.com/redux-observable/redux-observable">redux-observable</a>
- RxJS middleware for action side effects in Redux using "Epics".</li>
<li><a href="https://github.com/jas-chen/rx-redux">rx-redux</a> -
Reimplementation of Redux using RxJS.</li>
<li><a href="https://github.com/acdlite/redux-rx">redux-rx</a> - RxJS
utilities for Redux.</li>
<li><a href="https://github.com/shiftyp/redurx">redurx</a> - Redux'ish
Functional State Management using RxJS.</li>
</ul>
<h3 id="electron">Electron</h3>
<ul>
<li><a
href="https://github.com/samiskin/redux-electron-store">redux-electron-store</a>
- Redux store enhancer that allows automatic synchronization between
electron processes.</li>
</ul>
<h3 id="deku">Deku</h3>
<ul>
<li><a href="https://github.com/troch/deku-redux">deku-redux</a> -
Bindings for Redux in deku &lt; v2.</li>
</ul>
<h3 id="other">Other</h3>
<ul>
<li><a
href="https://github.com/netguru/redux-rollbar-middleware">redux-rollbar-middleware</a>
- Redux middleware that wraps exceptions in actions and sends them to
Rollbar with current state.</li>
<li><a href="https://github.com/outlandishideas/kasia">kasia</a> - React
Redux toolset for the WordPress API.</li>
</ul>
<h2 id="boilerplate">Boilerplate</h2>
<p><em>Boilerplates / Scaffolds / Starter Kits / Generators / Stack
Ensembles</em></p>
<ul>
<li><a href="https://github.com/SpencerCDixon/redux-cli">redux-cli</a> -
Opinionated CLI for building Redux/React apps quicker.</li>
<li><a href="https://github.com/reactuate/reactuate">reactuate</a> -
React/Redux stack (not a boilerplate kit).</li>
<li><a
href="https://github.com/jhen0409/react-chrome-extension-boilerplate">react-chrome-extension-boilerplate</a>
- Boilerplate for Chrome Extension React.js project.</li>
<li><a
href="https://github.com/bdefore/universal-redux">universal-redux</a> -
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.</li>
<li><a
href="https://github.com/pauldotknopf/react-aspnet-boilerplate">generator-react-aspnet-boilerplate</a>
- Starting point for building isomorphic React applications with ASP.NET
Core 1, leveraging existing techniques.</li>
<li><a
href="https://github.com/banderson/generator-redux">generator-redux</a>
- CLI tools for Redux: next-gen functional Flux/React with
devtools.</li>
<li><a
href="https://github.com/stylesuxx/generator-react-webpack-redux">generator-react-webpack-redux</a>
- React Webpack Generator including Redux support.</li>
<li><a href="https://github.com/matthewmueller/socrates">socrates</a> -
Small (8kb), batteries-included Redux store to reduce boilerplate and
promote good habits.</li>
</ul>
<h2 id="miscellaneous">Miscellaneous</h2>
<ul>
<li><a href="https://github.com/jas-chen/redux-core">redux-core</a> -
Minimal Redux.</li>
</ul>
<h2 id="learning-material">Learning Material</h2>
<ul>
<li><p><strong>Redux’s concepts</strong></p>
<p><a href="http://redux.js.org/">Redux official documentation</a> does
a great job at explaining Redux’s core principles.</p></li>
<li><p><strong>Why immutable data structures</strong></p>
<p>The <a
href="https://facebook.github.io/react/docs/advanced-performance.html">guide
on performance</a> of React’s official documentation explains well what
immutable data structures are and why they play an important
role.</p></li>
<li><p><strong>Side Effects</strong></p>
<p><a href="https://github.com/redux-loop/redux-loop">Redux Loop’s
readme</a> gives a good insight on Side Effects in the context of
Redux.</p></li>
</ul>
<p>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.</p>
<ul>
<li><p><strong>Functional Programming - Basics</strong></p>
<p>This <a
href="http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/">post</a>
goes over basic concepts of functional programming while building a
YouTube instant search demo app.</p></li>
<li><p><strong>Reactive Programming</strong></p>
<p>This <a
href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">introduction
to Reactive Programming</a> explains Reactive Programming with
clarity.</p></li>
<li><p><strong>Functional Programming - Going beyond</strong></p>
<p>Well written <a
href="https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504">article</a>
that talks about interesting computer science concepts implemented in
functional languages and how these apply to JavaScript.</p></li>
<li><p><strong>Monads</strong></p>
<p>Curious about monads? Wikipedia gives a good <a
href="https://en.wikipedia.org/wiki/Monad_(functional_programming)">overview
on monads</a> and <a
href="http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html">this
article</a> explains monads in more details with graphics and simple
examples.</p></li>
</ul>
<h2 id="community">Community</h2>
<ul>
<li><a href="https://www.reddit.com/r/reduxjs/">Reddit</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/redux">Stack
Overflow</a></li>
<li><a href="https://discord.gg/0ZcbPKXt5bZ6au5t">Discord</a></li>
<li><a href="http://slack.redux.io/">Slack</a></li>
<li><a href="https://gitter.im/reactjs/redux">Gitter</a></li>
<li><a href="https://webchat.freenode.net/"><code>#rackt</code> on
freenode</a></li>
</ul>
<p><a href="https://github.com/brillout/awesome-redux">redux.md
Github</a></p>