react教程，如何利用useSyncExternalStore订阅redux数据？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

上文使用useSyncExternalStore订阅了设备的在线状态，本文描述另外一个比较另类的场景，订阅redux的数据。在react里面，redux的数据官方并没有推荐使用useSyncExternalStore订阅，官方推荐是是使用Prodiver。

苏南大叔的程序如此灵动博客，记录苏南大叔的代码感想。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

可以通过本文所描述的useSyncExternalStore来使用redux里面的数据，但是！这并不是官方推荐的方案。仅仅是个可能性研究！正常情况下，请不用使用本文的方法！

正常的redux用法

redux定义store的方式有两种：

• createStore()【官方不推荐】https://newsn.net/say/redux-store.html
• redux/toolkit【官方推荐】https://newsn.net/say/redux-store-2.html

这个store创建了之后，可以脱离react环境使用。正常来说，需要在访问redux数据的子组件外部包裹一个Prodiver【其实也可以直接访问】，才能以更好的方式使用redux数据。

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

const state = useSelector((state) => state.count);
const dispatch = useDispatch();

onClick={() => dispatch({ type: 'ADD' })}

使用useSyncExternalStore

使用useSyncExternalStore，也可以订阅redux的数据，就相当于正版的Prodiver的效果。在子组件里面访问或操作数据的时候，要带上store.字样【这就是不方便的地方】。

事实上，redux官方有个.subscribe订阅函数，传入useSyncExternalStore作为第一个参数，第二个参数是如何处理数据，第三个参数涉及到服务器端渲染，暂时没用。

const state = useSyncExternalStore(store.subscribe, () => store.getState().count)

onClick={() => store.dispatch({ type: 'ADD' })}

完整代码

下面的代码是完整例子，稍稍解释一下：

• store的定义使用的是过期的createStore。
• 子组件Sunan1是正常的redux数据使用方式。
• 子组件Sunan2里面，是本文的主要内容useSyncExternalStore的用法。并不是推荐这种写法，仅仅是叙述一种可能性。而且这种写法，苏南大叔认为：确实相对而言不是很好。

import React, { useSyncExternalStore } from 'react';
import { combineReducers, createStore } from 'redux'
import { useSelector, useDispatch, Provider } from 'react-redux'
const reducer = (state = 1, action) => {
  switch (action.type) {
    case 'ADD':
      return state + 1
    default:
      return state
  }
}
const rootReducer = combineReducers({ count: reducer })
const store = createStore(rootReducer, { count: 100 })
// store.subscribe(() => console.log(store.getState()))
const App = () => {
  return (<>
    <Provider store={store}>
      <Sunan1 />
    </Provider>
    <Sunan2 />
  </>)
}
export default App
const Sunan1 = function () {
  const state = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      {state}
      <button onClick={() => dispatch({ type: 'ADD' })} >sunan大叔加1</button>
    </div>
  )
}
const Sunan2 = function () {
  const state = useSyncExternalStore(store.subscribe, () => store.getState().count)
  return (
    <div>
      {state}
      <button onClick={() => store.dispatch({ type: 'ADD' })} >苏南大叔加1</button>
    </div>
  )
}

结束语

苏南大叔写的react的新手教程集合：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。