Tag: react

• Action creator functions encapsulate preparing action objects and thunks
  • Action creators can accept arguments and contain setup logic, and return the final action object or thunk function
• Memoized selectors help improve Redux app performance
  • Reselect has a createSelector API that generates memoized selectors
  • Memoized selectors return the same result reference if given the same inputs
• Request status should be stored as an enum, not booleans
  • Using enums like 'idle' and 'loading' helps track status consistently
• “Flux Standard Actions” are the common convention for organizing action objects
  • Actions use payload for data, meta for extra descriptions, and error for errors
• Normalized state makes it easier to find items by ID
  • Normalized data is stored in objects instead of arrays, with item IDs as keys
• Thunks can return promises from dispatch
  • Components can wait for async thunks to complete, then do more work

References
https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns

• Redux middleware were designed to enable writing logic that has side effects
  • “Side effects” are code that changes state/behavior outside a function, like AJAX calls, modifying function arguments, or generating random values
• Middleware add an extra step to the standard Redux data flow
  • Middleware can intercept other values passed to dispatch
  • Middleware have access to dispatch and getState, so they can dispatch more actions as part of async logic
• The Redux “Thunk” middleware lets us pass functions to dispatch
  • “Thunk” functions let us write async logic ahead of time, without knowing what Redux store is being used
  • A Redux thunk function receives dispatch and getState as arguments, and can dispatch actions like “this data was received from an API response”

References
https://redux.js.org/tutorials/fundamentals/part-6-async-logic

• Redux stores can be used with any UI layer
  • UI code always subscribes to the store, gets the latest state, and redraws itself
• React-Redux is the official Redux UI bindings library for React
  • React-Redux is installed as a separate react-redux package
• The useSelector hook lets React components read data from the store
  • Selector functions take the entire store state as an argument, and return a value based on that state
  • useSelector calls its selector function and returns the result from the selector
  • useSelector subscribes to the store, and re-runs the selector each time an action is dispatched.
  • Whenever the selector result changes, useSelector forces the component to re-render with the new data
• The useDispatch hook lets React components dispatch actions to the store
  • useDispatch returns the actual store.dispatch function
  • You can call dispatch(action) as needed inside your components
• The <Provider> component makes the store available to other React components
  • Render <Provider store={store}> around your entire <App>

References
https://redux.js.org/tutorials/fundamentals/part-5-ui-react

• 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

createSlice internally uses createAction and createReducer, so you may also use Immer to write “mutating” immutable updates.

store.js

import {configureStore, createSlice} from '@reduxjs/toolkit';

const initialState = {counter: 0, showCounter: true};

const counterSlice = createSlice({
    name: "counter",
    initialState: initialState,
    reducers: {
        increment(state, action) {
            state.counter += action.payload
        },
        decrement(state, action) {
            state.counter -= action.payload
        },
        toggle(state, action) {
            state.showCounter = !state.showCounter
        }
    }
})

export const counterActions = counterSlice.actions;

export const store = configureStore({
    reducer: {
        counter: counterSlice.reducer
    }
});

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

Counter.js

import {useSelector, useDispatch} from 'react-redux';
import {counterActions} from "../app/store";

function Counter() {
    const counter = useSelector(state => state.counter.counter);
    const showCounter = useSelector(state => state.counter.showCounter);
    const dispatch = useDispatch();

    return (
        <div>
            <div>
                {showCounter && <div>Counter : {counter}</div>}
            </div>
            <div>
                <button onClick={() => dispatch(counterActions.increment(1))}>+1</button>
                <button onClick={() => dispatch(counterActions.decrement(1))}>-1</button>
                <button onClick={() => dispatch(counterActions.toggle())}>Toggle</button>
            </div>
        </div>
    );
}

export default Counter;

References
https://redux-toolkit.js.org/api/createslice