Skip to main content

redux ↔ (Design Pattern) to colocate state in global external central store, to control data flow with predictable scalable pattern of Dispatch > Reducer > Store

Sources: www.npmjs.com/package/redux redux.js.org/

aka Redux-Pattern

redux still king of state management libraries at 8.8M weekly downloads December 12th, 2022

image

Redux Definition

Redux Concepts

OLD Redux API​

named import or use Redux._reduxMethod

@reduxjs/toolkit​

Official Opinionated redux Toolset Lib with simplified improved syntax

react-redux​

sub-library with React Binding for redux

redux-form

redux-thunk​

redux sub-library to Thunk Redux Middleware for redux for logic to interact with Dispatch & getState() - to delay dispatch for action until condition met . extends redux actions to return functions that can be executed by thunk middleware, allows side-effects such as async api calls.

Sources: www.npmjs.com/package/redux stackoverflow.com/questions/35411423/how

Redux DevTools​

Browser Extension to inspect/debug redux with Time-Travel

Redux Pattern

mapStateToProps()

redux alternatives

Redux Folder Structure

References​

  1. redux-thunk ↔ redux sub-library to Thunk Redux Middleware for redux for logic to interact with Dispatch & getState() - to delay dispatch for action until condition met . extends redux actions to return functions that can be executed by thunk middleware, allows side-effects such as async api calls.

  2. Predictable ↔ redux helps scale Apps with consistent behaviour by restict data flow into a predictable pattern of dispatch>reducer>state

  3. Centralized ↔ redux manages App state from single global location

  4. Redux DevTools ↔ Browser Extension to inspect/debug redux with Time-Travel

  5. Root Reducer ↔ redux fn to compute new state from old state & Action data

  6. Dispatch ↔ redux fn to send Action object to Reducer

  7. Standalone ↔ redux lib has no Deps

  8. react-redux ↔ sub-library with React Binding for redux

  9. @reduxjs/toolkit ↔ Official Opinionated redux Toolset Lib with simplified improved syntax

  10. useReducer() ↔ Stateful Hook with logic to update new state from current state & payload via Redux Pattern

  11. Time-Travel ↔ (feat) to revisit redux state history

  12. Redux Store ↔ central global container to manage App state for redux