redux如何实现更新state自动更新视图（useSelector,useDispatch替代connet）

1.用<Provider store={store}><Provider>包裹需要暴露store的子组件,通过store在父子组件之间共享状态,代码如下:

  <Provider store={store}>
        <Home/>
        </Provider>

Home组件代码:

const Home = () =>{
  const value = useSelector(state => state.num)
  console.log(value)
  const dispatch = useDispatch()

  let unsubscribe = store.subscribe(() =>{
      console.log(store.getState().num)
  });
  return(
    <div>
      <p>下面是count</p>
      <p>{value}</p>
      <button onClick={()=>{dispatch({type:'add'});}}>+</button><hr/>
      <button onClick={()=>{dispatch({type:'delete'});}}>-</button>
    </div>
  )
}

useSelector

子组件可以通过useSelector访问num

通过Provider向子组件暴露store，通过store在父子组件之间共享状态（该案例我放在index.js的App外层，可以全局使用获得store）

  <Provider store={store}>
    <App />
    </Provider>

 

const value = useSelector(state => state.num)

useDispatch

子组件可以通过useDispatch 可以获取dispatch

相当于一个store.dispatch，看起来简洁一点

  const dispatch = useDispatch()

即使多个子组件也能一起共享状态

const ComponentUseReactRedux = () => {
  return (
    <div>
      <h2>ComponentUseReactRedux</h2>
      <Provider store={store}>
        <ChildComponentUseReactRedux />
        <ChildComponentUseReactRedux />
      </Provider>
    </div>
  )
}

本文部分内容转载自CSDNfundroid_方卓，仅作学习记录，原文地址https://blog.csdn.net/vitaviva/article/details/104508139，侵权请联系我