Redux生态系统枚举

React 2020-05-26

这里有字数限制，全文可以参考这里

Redux Ecosystem Links Introduction

本文是对redux-ecosystem-links的Fork与翻译。本文包含了一系列Redux的插件或者与之有紧密关联的项目的集合。本文包含了Redux官方文档中的 Ecosystem page 以及 Awesome-Redux 列表,并且包含了很多笔者自己搜集的项目列表。列举在某个具体的目录下的项目没有特定的顺序，只是按照我添加的顺序来。

Core Redux Concepts:核心的Redux概念

Reducers

Reducer Utilities

一个用于将多个单独的Redux Reducer合并为一个单独的Key的Reducer。

按照从左到右的顺序来合并Reducers

用于定义清晰的带有类型检查的Action Payloads，基于Redux Duck Paradigm。

以结构化方式组织Reducers

Create a redux reducer from an object of action handling functions,keyed by the actions they handle. Has createReducer.compose(fns) helper function to combine multiple action handlers into a single action.

Redux reducer that maps over an object of action types.

A utility to create Redux reducers from simple objects.

A utility to create Redux reducers which only respond to prefixed actions.

reducer-chain helps you to chain redux reducers with given state and action,then keep last updated state.

reducer-pipe helps you to pipe redux reducers with given state and action,passing previously returned state to next reducer,then keep last updated state.

reducer-sandbox helps you to reuse your redux reducers in different place without conflict them.

Publishing createReducer from Redux's Reducing Boilerplate page.

Remove redux reducer boilerplate

This library is intended to provide a little more object-oriented approach to write reducers. All it does is provide Reducer and CombineReducers classes to get rid of switch-case. Additionally it also lets you modify reducers dynamically.

A small library for writing redux actions with less boilerplate using classes.

Slightly more concise reducer switching for Flux Standard Actions.

Functions to easily build redux reducers without boilerplate code.

Reducer manager,it can be used as a replace for switch in Redux reducers

A personal preference for building reducers for Redux.

A way to combine reducers by their dependencies and access at their ancestor's values.

Another attempt to reuse your reducers,inspired from multireducer

Like Redux's combineReducers,but more better! Allows definition of nested reducers and multiple top-level reducers.

Higher-Order Reducers

Higher order reducer to add undo/redo functionality to redux state containers

Higher-order reducer to ignore redux actions

Higher-order reducer to reset the redux state on certain actions

Optimistically apply actions that can be later commited or reverted.

A reducer enhancer to enable type-agnostic optimistic updates

Higher-order reducer for store entities received from gaearon's normalizr and makes it easy to handle them.

Higher order cache reducer

Provides a higher-order reducer for managing multiple instances of the same redux state subtree.

A redux higher order reducer to simplify the state of fetched data.

Advanced Reducer Use Cases

https://medium.com/@matt.krick/solving-r...
https://medium.com/@matt.krick/introduci...
Adds additional logic to reducers to handle ordering of reducer handling,dynamic state creation,and display of reducer behavior in the Redux DevTools.

A component model for Redux state trees based on the React.js component model and other familiar design patterns from the React ecosystem. Allows creation of "reducer components" that can be dynamically added and removed,and targeted with scoped actions.

A configurable createReducer factory (i.e. it is a factory for making a createReducer function) that essentially allows projects to insert extra generic reducers (enhancers) before and after individual domain reducers are invoked,without muddying those individual domains.

A beforeReduce enhancer for use with redux-reducer-factory that can meld previous and initial state to flesh out default state of partial state hydration (for example,when persisting only specific parts of your state tree to local storage)

A store enhancer to allow resetting the state based on a specific action

redux-list-reducer is a factory function for creating Redux reducers that operate on lists.

Simple reducer library for Redux. It's like Reselect but for reducers. By using aggressive memoization,reducers can depend on each others in an efficient way,without having to query Redux store. It works fine with time-travel debugging and server-side rendering,because reducers remains totally stateless pure functions. It permits to replace the imperative waitFor of original Flux implementation by a purely functional approach.

Reducer combinator that allows reducers to wait upon each other.

Incrementally load Redux reducers into a single store

An Redux enhancer for registering reducer by namespace

Actions

Action Creation Utilities

Flux Standard Action utilities for Redux.

Wrapper for redux-actions to easily add namespaces to action types.

Batching action creator and associated higher order reducer for redux that enables batching subscriber notifications for an array of actions. Semi-similar use case as redux-batched-subscribe.

This is a utility for injecting actions in redux. The idea came from having a huge project with actions all over the place. What if we treated actions like routes and made a file with a list of them?

Sugar library for creating Redux or Flux actions.

Includes utility functionx to generate simple and dynamic actions.

Shortcut for making normal and async action types.

Create actions based on objects with functions

A simple wrapper around async redux actions.

Utilities and conventions for managing Redux (or Flux) actions. Co-locate your action types and action creators and keep them DRY,automatically dispatch follow-up actions when your async actions complete,validate arguments sent to each actionCreator

Allows definition of actions by passing named reducers in an object

A utility to create auto-typed Redux actions from an object.

Create thunk generator to dispatch Flux-Standard-Action in each phase of Promise.

API Action Creators for Redux

Helpers for creating FSA compatible actions.

Utility functions to generate action name triplets for CRUD ops.

Other Action Use Cases

An experimental module for representing Redux actions as events. In this model,reducers become observers,switch statements become event listeners,and dispatch() emits events.

SmartActions add a layer on top of actions to do things depending on whether an action would modify the state. When a SmartAction is called,it returns an object instead of dispatching immediately. The returned object tells you whether executing it would change the state,and a method to execute it.

An undo stack for redux. It works by storing incremental changes instead of entire states,which is optimal when working with large data. It works in combination with SmartActions.

Queue actions when offline and dispatch them when getting back online

Store

Store Persistence

Persist and rehydrate a redux store. The core idea behind redux-persist is to provide performant persistence and rehydration methods. At the same time redux-persist is designed to minimize complexity by knowing as little about your application as possible.

Add cross tab syncing to your redux app with 1 line. This tiny module listens to the window for redux-persist storage events. When an event occurs it will dispatch a rehydrate action.

Store enhancer that syncs (a subset) of your Redux store state to localstorage.

Custom slicer for redux-localstorage that allows reducers to define their own persistence configuration.

Enhancer for redux-localstorage that allows you to persist an immutable store

Persistence layer for redux with flexible backends. Save and load the Redux state with ease.

Sync store state to pouchdb

Redux One Way Linking. This is a simple method for supporting offline sync. The basic concept is,try to execute the action,on failure add it to a retry queue. Every so often process the retry queue until success is achieved.

Redux Live a framework for persisting Redux actions to a database and synchronising them across multiple clients.

Save and load actions to persist state

Redux middleware for recording redux actions for a particular session to session storage

Middleware to persist your state in a Redux app.

Ridiculously simple implementation for serialising the entire Redux store to local storage and retrieving it on application restart.

https://github.com/baptistemanson/redux-...
Share redux state across the network between clients and servers

Store Change Subscriptions

Watch/observe/monitor Redux store state changes. Creates store subscription callbacks that can do comparisons based on object paths or Reselect selectors.

Subscribe to a path in your redux state atom. Uses a middleware shared path strings for improved performance and dynamic subscription handling.

Process changes in redux with path matching. Uses a higher-order reducer that does comparisons,and uses a path string with a matching syntax.

Observe Redux state changes and dispatch actions on change.

Redux middleware for observing state change and taking action when changes of interest occur.

Store enhancer for redux which allows batching of subscribe notifications that occur as a result of dispatches. Semi-similar use case as redux-batched-actions.

Batch React updates that occur as a result of Redux dispatches,to prevent cascading renders.

Delay dispatching an action until a condition is true.

Store enhancer for redux that enables skipping subscriber notifications for individual actions.

redux-store-observer provides a thin wrapper around Redux's store#subscribe() to allow you to respond to state changes.

A higher order component decorator to read from a Redux store without subscribing to all its changes

Redux Debounce Listener allows you to delay invoking listeners. If you use this with React,rendering cost may be reduced.

use redux as a through pull stream

Other

Store composition for redux. Lifting allows you to "lift" your state,reducers and actions into another context. Lifting is a kind of store enhancer that is a superset of middleware.

Advanced/Additional Redux Concepts

Immutable Data

Immutable Data Structures

Fully-featured data structures library that uses advanced internal data storage to efficiently manage modified references. Very widely used,but also rather complex.

Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects. Uses freezing.

Immutable and type-checked state and actions for Redux (built on tcomb library)

A TINY,fail-fast,lazy,"naked",simple immutable Javascript objects library.

Ice Dam: a very lightweight library to freeze data. Data is frozen at the edge,where your Flux container sends it to views.

Easily update nested frozen objects and arrays in a declarative and immutable manner.

Utilities for treating frozen JavaScript objects as persistent immutable collections

Immutable Update Utilities

A collection of functions to perform immutable operations on plain JavaScript objects and arrays. Like updeep but with batched mutations and no freezing. Like icepick,but with batched mutations and a curried API that puts the target object as the last argument. No freezing.

Simple module for reducing immutable nested properties in Redux applications.

Modify deep object properties without modifying the original object (immutability). Works great with React and Redux.

Immutable path is a simple micro library providing js object selectors and modifiers. Stick to immutability: modification always returns a new instance of the object. Free optin and optout: no need to wrap all your plain objects in classes,no init.

Persistent functional object updates on vanilla js data structures (wraps react-addons-update)

The motivation for this module is to have a simple utility for changing state in a React-Redux application without mutate existing state of plain JavaScript objects.

Sprout provides a set of functions to help you work with nested data without all the headaches. Sprout never mutates the original data but returns new versions. This way,plain JavaScript objects (and arrays) can be effectively treated as if they were immutable.

Traverse objects and arrays immutably. Scour is a general-purpose library for dealing with JSON trees. Use it to: manage your Redux datastore; provide a model layer to access data in your single-page app; navigate a large JSON tree easily; rejoice in having a lightweight alternative to Immutable.js.

Immutability helpers with fast reads and acceptable writes. Timm's approach: use plain objects and arrays and provide simple mutation functions that will probably not handle all edge cases.

Utilities for creating and merging immutable data trees. Friendly to functional programming. Only plain JS objects,no custom classes,no OOP,bring your own data.

A utility to handle common array manipulation reducer functions.

A set of commands for immutably updating data.

"React Immutability Helpers" most likely are going to be deprecated. This library is a drop-in replacement for react-addons-update that in addition allows you to extend its functionality.

Immutable/Redux Interop

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

Provides utilities for dealing with Immutable data structures in Redux.

This is a small library that aims to provide integration tools between Redux & ImmutableJs that fully conforms Redux actions & reducers standards.

Utilities for using Immutable with Redux

Create reducers for immutable data structures.

Integrate seamless-immutable with Redux

A Redux combineReducers that returns an Immutable Map

Redux Immutable to JS allows you to convert immutable objects to JS objects automatically when Redux state is required outside reducers.

This module presents a simple way to generate action creators that provide a bit of type safety via tcomb.

Alternate Data Management Concepts

A small,simple and immutable ORM to manage relational data in your Redux store. Provides a Model-like interface on top of a portion of your store,allowing you to define relations between Models,store values as "tables" in your state,and make immutable updates by assigning values to Model fields.

Redux with MongoDB-like API. Dispatches internal Redux actions in response to API calls like db.someCollection.insert({id : 1,name "abc"}).

Data modeling with Immutable.js designed for use with Redux-like architectures. Defining models using Immutable.js,making it easier to define defaults,parsing,serialisation,merging,identifiying entities,etc. Models are stateless (anaemic),meaning the instances (Immutable.Maps) are passed to the Model's methods as the first argument and a new / updated version is returned. This makes them a great fit to implement Redux reducers.

Middleware

Promises

FSA-compliant promise middleware for Redux.

FSA-compliant promise middleware for Redux with simple behaviour with minimal boilerplate declarations.

Extended replacement of redux-thunk middleware to supporting async-await functions and implement server-side rendering for React components with asynchronous state.

RSA-compliant actions which resolve when any prop is a promise middleware for Redux.

Redux middleware for resolving and rejecting promises with conditional optimistic updates

Redux middleware for jQuery Deferred object

Promise based middleware for Redux to deal with asynchronous actions. redux-promises is backwards compatible with redux-thunk.

FSA-compliant promise middleware middleware for Redux and automatically add necessary for redux-optimist.

Provides a middleware for handling asynchronous actions.

A promise middleware that you add to your store and will handle resolving the promises and dispatching pending actions. It's based heavily around redux-promise.

FSA-compliant promise middleware for redux with optimistic update support

Await(Promise) middleware for Redux. Await middleware supprorts FSA actions.

Timeouts and Delays

Gives ability to call functions if certain actions have not been dispatched in x amount of time.

a Redux middleware which allows delayed dispatching of an action based on a trigger state in the Redux store.

Debounce allows you to discard a fast paced action from updating your state until a certain period of time passes after the last action is fired.

Delay redux actions

A middleware for redux that buffers all actions into a queue until a breaker condition is met,at which point the queue is released (i.e. actions are triggered).

Queueing middleware for Redux.

A Redux middleware which throttles actions.

A middleware for Redux to debounce actions.

Other Async Actions

Manage async redux actions sanely. This module exposes a middleware,reducer,and connector to take care of async state in a redux app.

Redux middleware for async loading of initial app state.

FSA-compliant future monad middleware for Redux,based on redux-promise.

FSA-compliant io monad middleware for Redux,based on redux-future.

FSA-compliant either monad middleware for Redux,based on redux-future.

A helper to let you wait for redux actions to be processed in a universal app.

Full featured middleware for handling async actions and automagically saving data (For RN & Web)

Redux middleware to notify when an action from the list is dispatched.

redux-co is a drop-in replacement for redux-thunk (and indeed passes its test suite). It's meant to support async actions through yieldables as well as plain thunk functions.

Action Grouping and Interception

A Redux middleware that allows you to easily combine async actions and dispatch them either sequentially or in parallel.

Batch middleware for Redux. Inspired by redux-batched-actions.

A middleware enabling sequential action dispatch for Redux.

Dispatch multiple actions from one action creator

Recurse Redux actions

A redux middleware that allows the creation of 'signal' actions that don't have reducers of their own,but instead dispatch other actions.

This is Redux middleware for listening to actions. The middleware is configured with actionListeners,and those action listeners are called after the reducer runs. The action listeners receive the action and the store.

Redux middleware for handling actions.

Redux middleware to execute a callback on action types using a whitelist or blacklist approach

Sockets and Adapters

A redux middleware that allows you to trigger a socket request on the client-side and dispatch an action in response.

Redux middleware for subscribing to observables in action creators.

redux-via provides a basis for using Redux across boundaries with Flux Standard Actions.

Store middleware for Redux that lets you dispatch streams of actions.

Socket middleware,actions,constants

Create Redux actions from arbitrary sources out of middlewares.

Redux middleware that dispatches an action to all connected clients

Redux middleware to emit actions to a socket.io server

Redux middleware for WebSockets communication.

Twilio's javascript SDK middleware for Redux.

Middleware for emitting redux actions over socket

Loopback middleware for redux

A redux middleware for zeromq

Redux middleware,and reducer for Matter.

Redux effects middleware for socketio

Socket.io middleware for Redux.

Get DDP collection data synced straight into a Redux store instead of minimongo and attempting optimistic updates.

Use Firebase with React and Redux in ES6

Unofficial Feathers bindings for React-Redux. React-Redux is great. Feathers is fantastic. feathers-react-redux aims to tie these two together.

A socket-cluster state snatcher. Socket cluster is awesome,but it doesn't share it's state,so you always have to go to your stored socket to find out. This tiny package grabs all the tasty little state bits & sticks em in your redux store. Then,it sets up listeners for updates to keep those state bits nice and fresh.

Network Requests

Uses either fetch or superagent to make requests.

Easily and cleanly handle AJAX in Redux.

Redux middleware for calling an API.

Redux middleware for fetching data with axios HTTP client

Redux middleware for API calls through Axios

Works like redux promise middleware. Resolves request objects from superagent or BackboneORM models. Can work with anything with a similar callback style api.

A middleware for redux that help to fetch data from rest API

redux middleware using axios making api calls with redux easy

Redux middleware for promise-based resource requests

Analytics

Analytics middleware for Redux.

Configurable redux middleware that sends your actions & user profile data to Mixpanel. It also works with React Native.

Redux middleware for sending analytics to Keen.

Segment.io analytics integration for redux.

Data Management

Drop falsy values that have been dispatched into redux. This may be a candidate for the simplest redux middleware possible.

Combines redux middleware and normalizr to make flattening nested data a snap

Redux middleware to coerce native javascript types into the equivalent Immutable.js types. Works with both Flux Standard Actions and non-standard actions.

Redux middleware to coerce native javascript types into the equivalent Mori types.

A redux middleware which provides Angular-like providers.

Redux middleware generator that allows dependencies to be injected into action creators.

Other

Set of middlewares for Redux to instrument and track actions and their corresponding child actions.

Allow dispatching of a string as action-type

Redux middleware that displays colourful notification badges in the favicon area.

The goal of the middleware is to provide an unopinionated workflow that delegates expensive operations to Web Workers.

Redux middleware that lets you easily trigger sound effects on actions. Makes it completely trivial to do so,by adding a meta property to any action.

A simple redux middleware for JWT based authorization. Works with any async store middleware.

Middleware to interact with Postal.js

Side Effects

Side Effects

The simplest possible side effects approach: dispatch functions instead of objects,which then get access to dispatch and getState. (Variations on the concept listed on the Middleware page.)

Generator-based side effects approach. Create "sagas",which act like background threads or daemons that can listen for actions and dispatch objects describing side effects.

React bindings for redux-saga,allowing you to dynamically start sagas by mounting them as React components

Wait for several action types to be dispatched before handling them

Sequence your effects naturally and purely by returning them from your reducers. Also returns descriptive objects,which are executed later.

Redux toolset for keeping all the side effects inside your reducers while maintaining their purity,using generators.

Trigger side effects after actions have been reduced.

A Side Effects enhancer for redux. The idea is simple: By given an asynchronous task(such as submitting data to server) a name,redux-task will create and handle the task state for you automatically. Then you can retrieve the state with the task name in your component easily. No need to create store state like isSubmitting or submitFailed and manully change them any more.

RxJS implementation of the Saga pattern for Redux.

Trigger side-effects (e.g. async actions) via dispatch. Vaguely similar to cerebral signals or elm side effects.

Library that enable returning of effects in reducers for redux library

Side Effect middleware for Redux. Lets you specify side effects in your reducing function that dispatch new actions.

A reactions approach to side-effects in redux.

Declarative side effects for redux with generators

An async extension for Redux that keeps you functional

Process manager for Redux to orchestrate complex/asynchronous operations in one place.

Non blocking async call effects.

Redux-Effects extensions

Virtual DOM for effects and impurities. You write pure functions,redux-effects handles the rest.

Bind to the result of an effectful action

Produce declarative specifications of your promise chains. Designed to be used in conjunction with redux-effects

Provides access to event listeners on window and document

Redux effects driver for localStorage

Random number generator for redux-effects

Access and manipulate cookies in redux-effects middleware in an isomorphic way.

Driver and set of action creators for timing related effects in redux-effects.

Declarative data fetching for redux

An extension for redux-effects-fetch,which lets you define fixtures for your FETCH actions. Now you are able to develope completely without any REST backend.

Add credentials to fetch requests when conditions are met

redux-effects middleware for dealing with location/url

Redux style control flow middleware - inspired by haskel's free monad approach to io and co.

Dev Tools

DevTools and Debugging

DevTools for Redux with hot reloading,action replay,and customizable UI

Browser extension to show DevTools UI in separate browser windows rather than in-page (currently Chrome only)

Use Redux DevTools remotely for React Native,hybrid,desktop and server side Redux apps.

DevTools Monitors

The default monitor for Redux DevTools with a tree view

A resizable and movable container for other monitors.

A state monitor that provides a convenient way to inspect "real world" app states that could be complicated and deeply nested,by pinning keys of interest and showing state diffs.

The primary goal of this monitor is to highlight the changes to an application's state from action to action.

Filterable tree view monitor for Redux DevTools. Actions are collapsed by default but they can be expanded by clicking on the action type. Strings and regular expressions can be used to filter actions by type as well as to filter the state tree by nodes or values.

A chart monitor for Redux DevTools. It shows a real-time view of the store aka the current state of the app.

Uses a slider based on react-slider to slide between different recorded actions. It also features play/pause/step-through.

A monitor that lets you manually dispatch actions to see how the app reacts.

A simple monitor for Redux DevTools that enables exporting,then importing the serialized state of a Redux application. It looks like a prompt() modal,but without the character limit.

Integrate multiple monitors to your redux devtools.

相关文章

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接...
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc ...