redux-loop - A library that ports Elm's effect system to Redux

  •        5

A port of the Elm Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your reducers. Yes! Absolutely.



Related Projects

redux-observable - RxJS middleware for action side effects in Redux using "Epics"

  •    Javascript

RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.This has peer dependencies of rxjs@5.x.x and redux, which will have to be installed as well.

redux-ship - Side effects with snapshots for Redux.

  •    Javascript

Side effects with snapshots for Redux. The key insight is to use generators to serialize all the side effects, including the control flow of the code, using the approach of free monads. Additionally, we provide a composition mechanism of sub-stores with effects and full typing (for now only in Flow).


  •    Javascript

Virtual DOM for effects and impurities. You write pure functions, redux-effects handles the rest. All effectful action creators should return a declarative object describing the effect to be done, even if their operation is normally synchronous*. In order to operate on the values returned by these actions, you need to specify your handlers in .meta.steps in the action object. This library comes with a composition utility bind, but you are free to write your own such as declarative-promise.

deku - Render interfaces using pure functions and virtual DOM

  •    Javascript

Deku is a library for rendering interfaces using pure functions and virtual DOM. Instead of using classes and local state, Deku just uses functions and pushes the responsibility of all state management and side-effects onto tools like Redux. It also aims to support only modern browsers to keep things simple.

redux-cycles - Bring functional reactive programming to Redux using Cycle.js

  •    Javascript

Handle redux async actions using Cycle.js. Then use createCycleMiddleware() which returns the redux middleware function with two driver factories attached: makeActionDriver() and makeStateDriver(). Use them when you call the Cycle run function (can be installed via npm install --save @cycle/run).

redux-saga-test-plan - Test Redux Saga with an easy plan.

  •    Javascript

Redux Saga Test Plan makes testing sagas a breeze. Whether you need to test exact effects and their ordering or just test your saga put's a specific action at some point, Redux Saga Test Plan has you covered. Redux Saga Test Plan aims to embrace both integration testing and unit testing approaches to make testing your sagas easy.

redux-logic - Redux middleware for organizing all your business logic

  •    Javascript

Use the type of code you and your team are comfortable and experienced with. Testing your logic is straight forward and simple. redux-logic-test provides additional utilities to make testing a breeze.

redux-api-middleware - Redux middleware for calling an API.

  •    Javascript

Redux middleware for calling an API. This middleware receives Redux Standard API-calling Actions (RSAAs) and dispatches Flux Standard Actions (FSAs) to the next middleware.

redux-logger - Logger for Redux

  •    Javascript

LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay Redux actions + state, network requests, console logs, and see a video of what the user saw. Note: logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).

redux-promise - FSA-compliant promise middleware for Redux.

  •    Javascript

FSA-compliant promise middleware for Redux. The default export is a middleware function. If it receives a promise, it will dispatch the resolved value of the promise. It will not dispatch anything if the promise rejects.

redux-pack - Sensible promise handling and middleware for redux

  •    Javascript

redux-pack is a library that introduces promise-based middleware that allows async actions based on the lifecycle of a promise to be declarative. Async actions in redux are often done using redux-thunk or other middlewares. The problem with this approach is that it makes it too easy to use dispatch sequentially, and dispatch multiple "actions" as the result of the same interaction/event, where they probably should have just been a single action dispatch.

redux-test-recorder - a redux middleware to automatically generate tests for reducers through ui interaction

  •    Javascript

Redux test recorder is a redux middleware for automatically generating tests for your reducers based on the actions in your app. Currently I've written redux-test-recorder-react a component to provide a gui for recording tests in react but I'm hopeful recording components for other frameworks can be created in the future. Also take a look at our latest build which currently runs a test generated using this module by taking advantage of the eval command. For a better idea of what is going on, you can take a look at the test file here.

redux-promise-middleware - Enables simple, yet robust handling of async action creators in Redux

  •    Javascript

Redux Promise Middleware enables simple, yet robust handling of async action creators in Redux. Given a single action with an async payload, the middleware transforms the action to a separate a pending action and a separate fulfilled/rejected action, representing the states of the async action.

redux-thunk - Thunk middleware for Redux

  •    Javascript

Thunk middleware for Redux. As you can see, it also requires .default at the end.

miso - :ramen: A tasty Haskell front-end framework

  •    Haskell

Miso is a small "isomorphic" Haskell front-end framework for quickly building highly interactive single-page web applications. It features a virtual-dom, diffing / patching algorithm, attribute and property normalization, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. Miso is pure by default, but side effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies. Miso can be considered a shallow embedded domain-specific language for modern web programming. To get started quickly building applications, we recommend using the stack or nix package managers. Obtaining GHCJS is required as a prerequisite. stack and nix make this process easy, if you're using cabal we assume you have obtained GHCJS by other means.

universal-redux - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering

  •    Javascript

Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) rendering server. You can either use its defaults and begin coding your project, or configure it to your liking with custom Webpack options and Express or Redux middleware. It's intended as both an easy starting point for developers new to React and Redux, as well as an extensible base by which advanced developers can augment with their own middleware and keep up to date with the fast-moving React ecosystem. The quickest way to get started is to clone the starter project. This gives you a base project that is set up with default configurations of Webpack and Express.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

redux-firestore - Redux bindings for Firestore

  •    Javascript

This assumes you are using npm as your package manager. It is common to make react components "functional" meaning that the component is just a function instead of being a class which extends React.Component. This can be useful, but can limit usage of lifecycle hooks and other features of Component Classes. recompose helps solve this by providing Higher Order Component functions such as withContext, lifecycle, and withHandlers.

redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React

  •    Javascript

How do you usually request data and store it to redux state? You create actions that do async jobs to load data, create reducer to save this data to redux state, then connect data to your component or container. Usually it's very similar routine tasks.