wandres.dev
Flux y Redux cheatsheet
⌘ REFERENCIA · 27 elementos

Cheatsheet de Flux y Redux

De Flux a Redux Toolkit y la ola ligera: store, reducers, middleware, selectores, RTK Query, Zustand y Jotai.

🔁 Núcleo 5

El flujo unidireccionalaction → reducer → store → view
Reducer puro(state, action) => newState
Única forma de cambiar el estadostore.dispatch(action)
Escuchar cambiosstore.subscribe(fn)
Leer el estado actualstore.getState()

🛠️ Redux Toolkit 6

Reducer + actions con ImmercreateSlice({ name, initialState, reducers })
Store con buenos defaultsconfigureStore({ reducer })
Async con pending/fulfilled/rejectedcreateAsyncThunk
Colecciones normalizadascreateEntityAdapter
Selector memoizado (reselect)createSelector
Tipar el payloadPayloadAction<T>

🌐 RTK Query 5

Definir la APIcreateApi({ endpoints })
Cache e invalidaciónprovidesTags / invalidatesTags
Hook generado de consultauseGetXQuery()
Hook generado de mutaciónuseAddXMutation()
Adaptar la respuestatransformResponse

⚡ Efectos 4

Despachar una función (por defecto en RTK)thunk
redux-saga con generadorestakeLatest / call / put
Listener middlewarestartListening({ matcher, effect })
Concurrencia en sagasfork / race / all

🪶 La ola ligera 7

Zustand: store como hookcreate((set) => ({ … }))
Zustand: comparación superficialuseShallow(selector)
Middleware de Zustandpersist / immer / devtools
Jotai: átomo primitivoatom(valor)
Jotai: familias y persistenciaatomFamily / atomWithStorage
Valtio: proxy reactivoproxy() + useSnapshot()
Store diminuto y agnósticonanostores