Month: May 2022

• Redux apps always have a single store
  • Stores are created with the Redux createStore API
  • Every store has a single root reducer function
• Stores have three main methods
  • getState returns the current state
  • dispatch sends an action to the reducer to update the state
  • subscribe takes a listener callback that runs each time an action is dispatched
• Store enhancers let us customize the store when it’s created
  • Enhancers wrap the store and can override its methods
  • createStore accepts one enhancer as an argument
  • Multiple enhancers can be merged together using the compose API
• Middleware are the main way to customize the store
  • Middleware are added using the applyMiddleware enhancer
  • Middleware are written as three nested functions inside each other
  • Middleware run each time an action is dispatched
  • Middleware can have side effects inside
• The Redux DevTools let you see what’s changed in your app over time
  • The DevTools Extension can be installed in your browser
  • The store needs the DevTools enhancer added, using composeWithDevTools
  • The DevTools show dispatched actions and changes in state over time

References
https://redux.js.org/tutorials/fundamentals/part-4-store

• Redux apps use plain JS objects, arrays, and primitives as the state values
  • The root state value should be a plain JS object
  • The state should contain the smallest amount of data needed to make the app work
  • Classes, Promises, functions, and other non-plain values should not go in the Redux state
  • Reducers must not create random values like Math.random() or Date.now()
  • It’s okay to have other state values that are not in the Redux store (like local component state) side-by side with Redux
• Actions are plain objects with a type field that describe what happened
  • The type field should be a readable string, and is usually written as 'feature/eventName'
  • Actions may contain other values, which are typically stored in the action.payload field
  • Actions should have the smallest amount of data needed to describe what happened
• Reducers are functions that look like (state, action) => newState
  • Reducers must always follow special rules:
    • Only calculate the new state based on the state and action arguments
    • Never mutate the existing state – always return a copy
    • No “side effects” like AJAX calls or async logic
• Reducers should be split up to make them easier to read
  • Reducers are usually split based on top-level state keys or “slices” of state
  • Reducers are usually written in “slice” files, organized into “feature” folders
  • Reducers can be combined together with the Redux combineReducers function
  • The key names given to combineReducers define the top-level state object keys

References
https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

• Redux’s intent can be summarized in three principles
  • Global app state is kept in a single store
  • The store state is read-only to the rest of the app
  • Reducer functions are used to update the state in response to actions
• Redux uses a “one-way data flow” app structure
  • State describes the condition of the app at a point in time, and UI renders based on that state
  • When something happens in the app:
    • The UI dispatches an action
    • The store runs the reducers, and the state is updated based on what occurred
    • The store notifies the UI that the state has changed
  • The UI re-renders based on the new state

References
https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

• Redux is a library for managing global application state
  • Redux is typically used with the React-Redux library for integrating Redux and React together
  • Redux Toolkit is the recommended way to write Redux logic
• Redux uses several types of code
  • Actions are plain objects with a type field, and describe “what happened” in the app
  • Reducers are functions that calculate a new state value based on previous state + an action
  • A Redux store runs the root reducer whenever an action is dispatched

References
https://redux.js.org/tutorials/fundamentals/part-1-overview