Redux Fundamentals, Part 5: UI and React

  • 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>