liddat also can series of multi-<Provide />-ing Redux store

Wei / is fe / Mar 19 2020

how many
- store(s)
- <Provider />'s
are there in your app?

you're building a React Redux app,

import * as React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { combineReducers, createStore } from "redux";
import Books, { bookReducer } from "./Books";

const store = createStore(bookReducer);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <Books />
  </Provider>,
  rootElement
);

now time to get creative, is there a situation where you would want multiple stores?

state

serving the state

state

  • React.useState()

  • React.useReducer()

  • Redux

increasing complexity

complexity in the component itself

  • deeply nested objects
  • complex arrays

complexity in state transition & interaction

  • multiple interactions modifying the same state
  • multiple child components modifying the same state
  • state changes that may happen during the same component render pass

React.useState()

  • single variables independent of each other

  • suitable for easy states

Normally when we use React Redux, we wrap the whole app with a <Provider />

Made with Slides.com