React Redux

Redux is a standalone state management library that can work with any UI framework. React Redux is the official UI binding library for React.

Instead of manually interacting with the Redux store from your React components, React Redux acts as a bridge. It automates the repetitive and complex logic required to integrate a Redux store with a UI layer, specifically:

1. Subscribing to store updates: Automatically listening for changes in the Redux state.
2. Data Extraction: Extracting only the specific pieces of data needed by a component.
3. UI Synchronization: Triggering re-renders only when the relevant data has actually changed.
4. Action Dispatching: Providing mechanisms to respond to UI inputs by dispatching Redux actions.

Using React Redux ensures your application follows React's declarative design principles and stays compatible with updates to both React and Redux.

While Redux is designed for a single store, you can implement multiple stores by providing unique custom contexts for each. This isolates the stores from one another.

To use multiple stores in a single component tree, you can wrap parts of your application in nested <Provider> components, each with its own store and context. You can then use compose with multiple connect calls to allow a single component to receive props from multiple stores.

const ContextA = React.createContext(null);
const ContextB = React.createContext(null);

const storeA = createStore(reducerA);
const storeB = createStore(reducerB);

function App() {
  return (
    <Provider store={storeA} context={ContextA}>
      <Provider store={storeB} context={ContextB}>
        <RootModule />
      </Provider>
    </Provider>
  );
}

// Chaining connect to merge props from both stores
const MultiConnectedComponent = compose(
  connect(mapStateA, null, null, { context: ContextA }),
  connect(mapStateB, null, null, { context: ContextB })
)(MyComponent);

Because hooks do not create a nested hierarchy of subscriptions (unlike connect()), edge cases like "stale props" and "zombie children" can occur:

• Stale Props: A selector relies on props that haven't updated yet because the component hasn't re-rendered, leading to incorrect data or errors.
• Zombie Children: A child component subscribes to the store before its parent. If an action deletes the data the child relies on, the child might attempt to read non-existent data before the parent can unmount it.

How to mitigate these issues:

1. Defensive Selectors: Don't reach straight into nested state (e.g., state.todos[props.id].name). Instead, verify the object exists first: const todo = state.todos[props.id]; return todo ? todo.name : undefined;.
2. Avoid Props in Selectors: Try not to rely on component props inside your useSelector function.
3. Use connect() as a Buffer: Placing a connect()-wrapped component in the tree just above a hook-based component can prevent these issues by ensuring the connect() component re-renders and updates its children via the subscription hierarchy.

The number of arguments you define in your mapStateToProps function changes when the function is executed:

1. (state): The function runs only when the root store state object changes.
2. (state, ownProps): The function runs when the store state changes AND whenever the component's own props change.

Best Practice: Do not include ownProps in the function signature unless you actually need to use it. Including it causes the function to run more frequently, potentially impacting performance.

Argument Injection Rules

React Redux determines whether to inject ownProps based on the number of mandatory parameters in your function definition:

• Will NOT receive ownProps: If the function has exactly one mandatory parameter.
• WILL receive ownProps: If the function has zero or two mandatory parameters.

// Does NOT receive ownProps (1 mandatory parameter)
function mapStateToProps(state) {
  console.log(state) // state
  console.log(arguments[1]) // undefined
}

// DOES receive ownProps (2 mandatory parameters)
function mapStateToProps(state, ownProps) {
  console.log(state) // state
  console.log(ownProps) // ownProps
}

// DOES receive ownProps (0 mandatory parameters)
function mapStateToProps() {
  console.log(arguments[0]) // state
  console.log(arguments[1]) // ownProps
}

// DOES receive ownProps (using rest parameters)
function mapStateToProps(...args) {
  console.log(args[0]) // state
  console.log(args[1]) // ownProps
}