Preface:

React-redux is designed to make redux work better with React. The core apis were Provide and Connect, and later react-hooks that replaced Connect

1. Provider optimizes store.subsribe

import { useSelector, useDispatch, Provider } from 'react-redux'

/* Do not need store.subscribe, similar to useContext to solve the subscription pain point */

function render() {
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store} >
        <ReduxPage />
      </Provider>
    </React.StrictMode>.document.getElementById('root')); } render()// store.subscribe(render)
Copy the code

Tips: If you don’t know much about Providers, try useContext or # 1 Minute React Context

2. UseSelector, useDispatch optimizes getState, dispatch

const ReduxPage = props= > {

  /* Easy to use store.getState and store.dispatch */
  
  // const state = store.getState()
  const state = useSelector(state= > state)
  const dispatch = useDispatch()
  return (<>
    <p>{state.todo}</p>
    <p>{state.counter}</p>
    <button onClick={()= > {
      // store.dispatch({ type: 'counter/ADD', payload: 2 })
      dispatch({ type: 'counter/ADD', payload: 2 })
    }}>counter add</button>
  </>)}Copy the code
  • Contrast:# A little every day, you will findReact-redux is so easy to understand.

Try it at codesandbox