Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Ecosistema

Redux es una biblioteca pequeña, pero sus contratos y APIs están cuidadosamente diseñados para generar un ecosistema de herramientas y extensiones. La comunidad ha creado una amplia variedad de complementos, bibliotecas y herramientas útiles. No necesitas usar ninguno de estos complementos para utilizar Redux, pero pueden facilitar la implementación de funciones y resolver problemas en tu aplicación.

Para un catálogo extenso de bibliotecas, complementos y herramientas relacionadas con Redux, consulta la lista de Enlaces del Ecosistema Redux. Además, la lista de Enlaces React/Redux contiene tutoriales y otros recursos útiles para cualquiera que esté aprendiendo React o Redux.

Esta página enumera algunos complementos relacionados con Redux que los mantenedores han evaluado personalmente, o que han demostrado una amplia adopción en la comunidad. ¡Que esto no te desanime para probar los demás! El ecosistema crece muy rápido y tenemos tiempo limitado para revisarlo todo. Considera estas nuestras "recomendaciones del equipo", y no dudes en enviar un PR si has creado algo maravilloso con Redux.

Tabla de Contenidos

• Ecosistema
  • Tabla de Contenidos
  • Integración de Bibliotecas y Conectores
  • Reductores
    • Combinación de Reductores
    • Composición de Reductores
    • Reductores de Orden Superior
  • Acciones
  • Utilidades
  • Store
    • Suscripciones a Cambios
    • Procesamiento por Lotes
    • Persistencia
  • Datos Inmutables
    • Estructuras de Datos
    • Utilidades de Actualización Inmutable
    • Interoperabilidad Immutable/Redux
  • Efectos Secundarios
    • Ampliamente Utilizados
    • Promesas
  • Middleware
    • Redes y Sockets
    • Comportamiento Asíncrono
    • Analítica
  • Entidades y Colecciones
  • Estado de Componentes y Encapsulación
  • Herramientas de Desarrollo
    • Depuradores y Visualizadores
    • Monitores de DevTools
    • Registro de Eventos
    • Detección de Mutaciones
  • Pruebas
  • Enrutamiento
  • Formularios
  • Abstracciones de Nivel Superior
  • Convenciones de la Comunidad

Integración de Bibliotecas y Conectores

reduxjs/react-redux
Los conectores oficiales de React para Redux, mantenidos por el equipo de Redux

angular-redux/ng-redux
Conectores de Angular 1 para Redux

ember-redux/ember-redux
Conectores de Ember para Redux

glimmer-redux/glimmer-redux
Conectores de Redux para el motor de componentes Glimmer de Ember

tur-nr/polymer-redux
Conectores de Redux para Polymer

lastmjs/redux-store-element Conectores de Redux para elementos personalizados

Reductores

Combinación de Reductores

ryo33/combineSectionReducers
Versión ampliada de combineReducers que permite pasar state como tercer argumento a todos los reducers de secciones.

KodersLab/topologically-combine-reducers
Variante de combineReducers que permite definir dependencias entre secciones para ordenar y pasar datos

var masterReducer = topologicallyCombineReducers(
  { auth, users, todos },
  // define the dependency tree
  { auth: ['users'], todos: ['auth'] }
)

Composición de Reductores

acdlite/reduce-reducers
Proporciona composición secuencial de reducers en el mismo nivel

const combinedReducer = combineReducers({ users, posts, comments })
const rootReducer = reduceReducers(combinedReducer, otherTopLevelFeatureReducer)

mhelmer/redux-xforms
Colección de transformadores de reducers componibles

const createByFilter = (predicate, mapActionToKey) =>
  compose(
    withInitialState({}), // inject initial state as {}
    withFilter(predicate), // let through if action has filterName
    updateSlice(mapActionToKey), // update a single key in the state
    isolateSlice(mapActionToKey) // run the reducer on a single state slice
  )

adrienjt/redux-data-structures
Funciones fábrica de reducers para estructuras de datos comunes: contadores, mapas, listas (colas, pilas), conjuntos

const myCounter = counter({
  incrementActionTypes: ['INCREMENT'],
  decrementActionTypes: ['DECREMENT']
})

Reductores de Orden Superior

omnidan/redux-undo
Historial de acciones y deshacer/rehacer sin esfuerzo para tus reducers

omnidan/redux-ignore
Ignora acciones de Redux mediante array o función de filtrado

omnidan/redux-recycle
Reinicia el estado de Redux ante ciertas acciones

ForbesLindesay/redux-optimist
Potenciador de reducers para habilitar actualizaciones optimistas independientes del tipo

Utilidades

reduxjs/reselect
Crea funciones selectoras memorizadas y componibles para derivar datos eficientemente del estado del store

const taxSelector = createSelector(
  [subtotalSelector, taxPercentSelector],
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
)

paularmstrong/normalizr
Normaliza JSON anidado según un esquema

const user = new schema.Entity('users')
const comment = new schema.Entity('comments', { commenter: user })
const article = new schema.Entity('articles', {
  author: user,
  comments: [comment]
})
const normalizedData = normalize(originalData, article)

planttheidea/selectorator
Abstracciones sobre Reselect para casos de uso comunes de selectores

const getBarBaz = createSelector(
  ['foo.bar', 'baz'],
  (bar, baz) => `${bar} ${baz}`
)
getBarBaz({ foo: { bar: 'a' }, baz: 'b' }) // "a b"

Store

Suscripciones a Cambios

jprichardson/redux-watch
Observa cambios de estado basados en rutas clave o selectores

let w = watch(() => mySelector(store.getState()))
store.subscribe(
  w((newVal, oldVal) => {
    console.log(newval, oldVal)
  })
)

ashaffer/redux-subscribe
Suscripciones centralizadas a cambios de estado basados en rutas

store.dispatch( subscribe("users.byId.abcd", "subscription1", () => {} );

Procesamiento por Lotes

tappleby/redux-batched-subscribe
Potenciador de store que puede debouncear notificaciones de suscripción

const debounceNotify = _.debounce(notify => notify())
const store = configureStore({
  reducer,
  enhancers: [batchedSubscribe(debounceNotify)]
})

manaflair/redux-batch
Potenciador de store que permite despachar arrays de acciones

const store = configureStore({
  reducer,
  enhancers: existingEnhancersArray => [
    reduxBatch,
    ...existingEnhancersArray,
    reduxBatch
  ]
})
store.dispatch([{ type: 'INCREMENT' }, { type: 'INCREMENT' }])

laysent/redux-batch-actions-enhancer
Potenciador de store que acepta acciones en batch

const store = configureStore({ reducer, enhancers: [batch().enhancer] })
store.dispatch(createAction({ type: 'INCREMENT' }, { type: 'INCREMENT' }))

tshelburne/redux-batched-actions
Reducer de orden superior que maneja acciones en batch

const store = configureStore({ reducer: enableBatching(rootReducer) })
store.dispatch(batchActions([{ type: 'INCREMENT' }, { type: 'INCREMENT' }]))

Persistencia

rt2zz/redux-persist
Persiste y rehidrata un store de Redux, con muchas opciones extensibles

const persistConfig = { key: 'root', version: 1, storage }
const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
      }
    })
})
export const persistor = persistStore(store)

react-stack/redux-storage
Capa de persistencia para Redux con backends flexibles

const reducer = storage.reducer(combineReducers(reducers))
const engine = createEngineLocalStorage('my-save-key')
const storageMiddleware = storage.createMiddleware(engine)
const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware.concat(storageMiddleware)
})

redux-offline/redux-offline
Almacén persistente para aplicaciones Offline-First, con soporte para interfaces de usuario optimistas

const store = configureStore({ reducer, enhancer: [offline(offlineConfig)] })
store.dispatch({
  type: 'FOLLOW_USER_REQUEST',
  meta: { offline: { effect: {}, commit: {}, rollback: {} } }
})

Datos Inmutables

ImmerJS/immer
Actualizaciones inmutables con código mutativo normal, usando Proxies

const nextState = produce(baseState, draftState => {
  draftState.push({ todo: 'Tweet about it' })
  draftState[1].done = true
})

Efectos Secundarios

Ampliamente Utilizados

reduxjs/redux-thunk
Despacha funciones que reciben dispatch y getState como parámetros. Funciona como acceso para llamadas AJAX y comportamiento asíncrono.

Mejor para: iniciación, lógica asíncrona simple y lógica síncrona compleja.

function fetchData(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});

        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(response => dispatch({type : "REQUEST_SUCCEEDED", payload : response})
            .catch(error => dispatch({type : "REQUEST_FAILED", error : error});
    };
}

function addTodosIfAllowed(todoText) {
    return (dispatch, getState) => {
        const state = getState();

        if(state.todos.length < MAX_TODOS) {
            dispatch({type : "ADD_TODO", text : todoText});
        }
    }
}

listenerMiddleware (Redux Toolkit)
listenerMiddleware es una alternativa ligera a middleware asíncronos como sagas y observables. Similar a thunks en complejidad, puede replicar patrones comunes de sagas.

listenerMiddleware.startListening({
  matcher: isAnyOf(action1, action2, action3),
  effect: (action, listenerApi) => {
    const user = selectUserDetails(listenerApi.getState())

    const { specialData } = action.meta

    analyticsApi.trackUsage(action.type, user, specialData)
  }
})

redux-saga/redux-saga
Maneja lógica asíncrona usando funciones generadoras síncronas. Las sagas devuelven efectos ejecutados por el middleware, actuando como "hilos en segundo plano".

Mejor para: lógica asíncrona compleja, flujos de trabajo desacoplados

function* fetchData(action) {
  const { someValue } = action
  try {
    const response = yield call(myAjaxLib.post, '/someEndpoint', {
      data: someValue
    })
    yield put({ type: 'REQUEST_SUCCEEDED', payload: response })
  } catch (error) {
    yield put({ type: 'REQUEST_FAILED', error: error })
  }
}

function* addTodosIfAllowed(action) {
  const { todoText } = action
  const todos = yield select(state => state.todos)

  if (todos.length < MAX_TODOS) {
    yield put({ type: 'ADD_TODO', text: todoText })
  }
}

redux-observable/redux-observable

Maneja lógica asíncrona usando cadenas observables RxJS ("épicas"). Compone y cancela acciones asíncronas para crear efectos secundarios.

Mejor para: lógica asíncrona compleja, flujos de trabajo desacoplados

const loginRequestEpic = action$ =>
  action$
    .ofType(LOGIN_REQUEST)
    .mergeMap(({ payload: { username, password } }) =>
      Observable.from(postLogin(username, password))
        .map(loginSuccess)
        .catch(loginFailure)
    )

const loginSuccessfulEpic = action$ =>
  action$
    .ofType(LOGIN_SUCCESS)
    .delay(2000)
    .mergeMap(({ payload: { msg } }) => showMessage(msg))

const rootEpic = combineEpics(loginRequestEpic, loginSuccessfulEpic)

redux-loop/redux-loop

Adaptación de la Arquitectura Elm a Redux: los reductores devuelven estado + descripción de efectos, permitiendo secuenciar efectos puramente.

Mejor para: emular Elm en Redux+JS

export const reducer = (state = {}, action) => {
  switch (action.type) {
    case ActionType.LOGIN_REQUEST:
      const { username, password } = action.payload
      return loop(
        { pending: true },
        Effect.promise(loginPromise, username, password)
      )
    case ActionType.LOGIN_SUCCESS:
      const { user, msg } = action.payload
      return loop(
        { pending: false, user },
        Effect.promise(delayMessagePromise, msg, 2000)
      )
    case ActionType.LOGIN_FAILURE:
      return { pending: false, err: action.payload }
    default:
      return state
  }
}

jeffbski/redux-logic

Librería de efectos secundarios con observables que permite callbacks, promesas, async/await u observables. Procesa acciones declarativamente.

Mejor para: lógica asíncrona altamente desacoplada

const loginLogic = createLogic({
  type: Actions.LOGIN_REQUEST,

  process({ getState, action }, dispatch, done) {
    const { username, password } = action.payload

    postLogin(username, password)
      .then(
        ({ user, msg }) => {
          dispatch(loginSucceeded(user))

          setTimeout(() => dispatch(showMessage(msg)), 2000)
        },
        err => dispatch(loginFailure(err))
      )
      .then(done)
  }
})

Promesas

acdlite/redux-promise
Despacha promesas como payloads de acciones, generando acciones FSA cuando se resuelven o rechazan.

dispatch({ type: 'FETCH_DATA', payload: myAjaxLib.get('/data') })
// will dispatch either {type : "FETCH_DATA", payload : response} if resolved,
// or dispatch {type : "FETCH_DATA", payload : error, error : true} if rejected

lelandrichardson/redux-pack
Manejo de promesas declarativo basado en convenciones que guía sin exponer todo el poder de dispatch.

dispatch({type : "FETCH_DATA", payload : myAjaxLib.get("/data") });

// in a reducer:
        case "FETCH_DATA": =
            return handle(state, action, {
                start: prevState => ({
                  ...prevState,
                  isLoading: true,
                  fooError: null
                }),
                finish: prevState => ({ ...prevState, isLoading: false }),
                failure: prevState => ({ ...prevState, fooError: payload }),
                success: prevState => ({ ...prevState, foo: payload }),
            });

Middleware

Redes y Sockets

svrcekmichal/redux-axios-middleware
Obtiene datos con Axios y despacha acciones inicio/éxito/fallo

export const loadCategories() => ({ type: 'LOAD', payload: { request : { url: '/categories'} } });

agraboso/redux-api-middleware
Lee acciones de llamadas API, obtiene datos y despacha acciones FSA

const fetchUsers = () => ({
  [CALL_API]: {
    endpoint: 'http://www.example.com/api/users',
    method: 'GET',
    types: ['REQUEST', 'SUCCESS', 'FAILURE']
  }
})

itaylor/redux-socket.io
Conector con opiniones definidas entre socket.io y redux.

const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware.concat(socketIoMiddleware)
})
store.dispatch({ type: 'server/hello', data: 'Hello!' })

tiberiuc/redux-react-firebase
Integración entre Firebase, React y Redux

Comportamiento Asíncrono

rt2zz/redux-action-buffer
Almacena acciones en una cola hasta que se cumple una condición de liberación, momento en el que se despachan

wyze/redux-debounce
Middleware compatible con FSA para Redux que aplica debounce a las acciones.

mathieudutour/redux-queue-offline
Encola acciones cuando no hay conexión y las despacha al volver a estar en línea.

Analítica

rangle/redux-beacon
Se integra con servicios de analítica, funciona offline y desacopla la lógica analítica de la de la aplicación

markdalgleish/redux-analytics
Detecta Flux Standard Actions con metadatos analíticos y las procesa

Entidades y Colecciones

tommikaikkonen/redux-orm
Un ORM inmutable simple para gestionar datos relacionales en tu store de Redux.

Versent/redux-crud
Acciones y reductores basados en convenciones para lógica CRUD

kwelch/entities-reducer
Un reducer de orden superior que gestiona datos de Normalizr

amplitude/redux-query
Declara dependencias de datos colocalizadas con tus componentes, ejecuta consultas al montarlos, realiza actualizaciones optimistas y dispara cambios en el servidor mediante acciones de Redux.

cantierecreativo/redux-bees
Interacción declarativa con JSON-API que normaliza datos, incluyendo un HOC de React para ejecutar consultas

GetAmbassador/redux-clerk
Gestión asíncrona CRUD con normalización, actualizaciones optimistas, creadores de acciones síncronas/asíncronas, selectores y un reducer extensible.

shoutem/redux-io
Abstracción JSON-API con CRUD asíncrono, normalización, actualizaciones optimistas, caché, estado de datos y gestión de errores.

jmeas/redux-resource
Un sistema pequeño pero potente para gestionar "recursos": datos persistidos en servidores remotos.

Estado de Componentes y Encapsulación

threepointone/redux-react-local
Estado local de componentes en Redux, con gestión para acciones de componentes

@local({
  ident: 'counter', initial: 0, reducer : (state, action) => action.me ? state + 1 : state }
})
class Counter extends React.Component {

epeli/lean-redux
Hace que el estado de componentes en Redux sea tan sencillo como setState

const DynamicCounters = connectLean(
    scope: "dynamicCounters",
    getInitialState() => ({counterCount : 1}),
    addCounter, removeCounter
)(CounterList);

DataDog/redux-doghouse
Facilita la creación de componentes reutilizables en Redux al delimitar acciones y reductores a instancias específicas.

const scopeableActions = new ScopedActionFactory(actionCreators)
const actionCreatorsScopedToA = scopeableActions.scope('a')
actionCreatorsScopedToA.foo('bar') //{ type: SET_FOO, value: 'bar', scopeID: 'a' }

const boundScopeableActions = bindScopedActionFactories(
  scopeableActions,
  store.dispatch
)
const scopedReducers = scopeReducers(reducers)

Herramientas de Desarrollo

Depuradores y Visualizadores

reduxjs/redux-devtools

Implementación original de Redux DevTools por Dan Abramov, diseñada para visualizar el estado en la aplicación y depuración con viaje en el tiempo

zalmoxisus/redux-devtools-extension

Extensión de navegador de Mihail Diordiev que combina múltiples vistas de monitor de estado e integra las herramientas de desarrollo del propio navegador

infinitered/reactotron

Aplicación Electron multiplataforma para inspeccionar apps de React y React Native, incluyendo estado de la aplicación, peticiones API, rendimiento, errores, sagas y despacho de acciones.

Monitores para DevTools

Log Monitor
Monitor predeterminado para Redux DevTools con vista de árbol

Dock Monitor
Acoplable redimensionable y movible para monitores de Redux DevTools

Slider Monitor
Monitor personalizado para Redux DevTools que reproduce acciones grabadas

Diff Monitor
Monitor para Redux DevTools que muestra diferencias en mutaciones del store entre acciones

Filterable Log Monitor
Monitor de vista de árbol con filtros para Redux DevTools

Filter Actions
Monitor componible para Redux DevTools con capacidad para filtrar acciones

Registro de Actividades

evgenyrodionov/redux-logger
Middleware de registro que muestra acciones, estados y diferencias

inakianduaga/redux-state-history
Potenciador que ofrece viaje en el tiempo y grabación eficiente de acciones, incluyendo importación/exportación de registros y reproducción.

joshwcomeau/redux-vcr
Graba y reproduce sesiones de usuario en tiempo real

socialtables/redux-unhandled-action
Avisa sobre acciones que no produjeron cambios de estado durante el desarrollo

Detección de Mutaciones

leoasis/redux-immutable-state-invariant
Middleware que lanza un error al intentar mutar el estado durante un despacho o entre despachos.

flexport/mutation-sentinel
Ayuda a detectar profundamente mutaciones en tiempo real y aplicar inmutabilidad en tu código.

mmahalwy/redux-pure-connect
Verifica y registra si el método connect de react-redux recibe funciones mapState que crean props impuros.

Pruebas

arnaudbenard/redux-mock-store
Store simulado que guarda acciones despachadas en un array para aserciones

Workable/redux-test-belt
Extiende la API del store para facilitar aserciones, aislamiento y manipulación

conorhastings/redux-test-recorder
Middleware que genera automáticamente pruebas de reducers basadas en acciones de la aplicación

wix/redux-testkit
Kit de pruebas completo y con opiniones definidas para testear proyectos Redux (reducers, selectors, acciones, thunks)

jfairbank/redux-saga-test-plan
Facilita enormemente las pruebas de integración y unitarias de sagas

Enrutamiento

supasate/connected-react-router Sincroniza el estado de React Router v4+ con tu store de Redux.

faceyspacey/redux-first-router
Enrutamiento Redux-first sin fisuras. Piensa tu aplicación en estados, no en rutas ni componentes, manteniendo sincronizada la barra de direcciones. Todo es estado. Conecta tus componentes y simplemente despacha acciones estándar de Flux.

Formularios

erikras/redux-form
Biblioteca completa para que formularios HTML en React almacenen su estado en Redux.

davidkpiano/react-redux-form
React Redux Form es una colección de creadores de reducers y acciones que simplifican y optimizan la implementación de formularios complejos y personalizados con React y Redux.

Abstracciones de Nivel Superior

keajs/kea
Una abstracción sobre Redux, Redux-Saga y Reselect. Proporciona un marco para acciones, reducers, selectores y sagas de tu aplicación. Potencia Redux haciéndolo tan simple de usar como setState. Reduce código repetitivo manteniendo la componibilidad.

TheComfyChair/redux-scc
Toma una estructura definida y usa 'comportamientos' para crear un conjunto de acciones, respuestas de reducers y selectores.

Bloomca/redux-tiles
Proporciona una abstracción mínima sobre Redux para permitir fácil componibilidad, peticiones asíncronas sencillas y testabilidad racional.

Convenciones de la Comunidad

Flux Standard Action
Un estándar amigable para objetos de acción Flux

Canonical Reducer Composition
Un estándar con opiniones definidas para composición anidada de reducers

Ducks: Redux Reducer Bundles
Una propuesta para agrupar reducers, tipos de acciones y acciones