react-redux的useSelector()返回初始值而非更新后的状态？

你遇到的useSelector始终返回初始值的问题，由三个直接导致状态链路断开的代码bug触发，逐一说明如下：

1. 最致命的Store创建位置错误 #

你当前将combineReducers、createStore的逻辑全部写在Root组件的函数作用域内部，属于典型的闭包作用域bug：

// 错误示例：每次Root组件重渲染，都会重新执行这段代码
function Root() {
  const [tkn, updateTkn] = useState("");
  const [type, updateType] = useState("");
  
  // 每次重渲染，都会生成全新的Store实例
  const rootReducer = combineReducers({ auth: credReducer });
  const store = createStore(rootReducer);
}

故障原因 #

只要你在subscribe回调里调用updateType、updateTkn更新本地状态，就会触发Root组件重渲染。重渲染时函数作用域会从头执行，生成一个完全空的、没有任何历史状态的全新Store实例，传给<Provider>的就是这个新的空Store。
你之前dispatch到旧Store的状态更新，根本不会同步到这个新实例上，所有用useSelector读取状态的组件，拿到的自然永远是新Store的初始空值。

2. store.subscribe 调用逻辑错误 #

Redux原生的subscribe方法仅接收1个回调函数作为入参，你给方法传的第二个参数[]是完全无效的。本质是混淆了useEffect的依赖数组写法和原生subscribe的使用方式：

• 硬塞给subscribe的空数组会被Redux直接忽略，没有任何作用
• 因为每次重渲染都新建Store，旧Store的订阅回调从来没被主动取消，会持续触发本地状态更新，进一步打乱状态同步逻辑

3. 冗余的状态同步链路 #

你在Redux全局状态之外，额外用组件本地的useState存了一份和Redux中auth字段完全重复的phone、tp值，人为搭建了一层完全没必要的状态同步链路：Redux状态变更 → 手动subscribe → 调用setState更新本地状态 → 触发组件重渲染。链路越长越容易出现脱节bug，完全没必要多这一层逻辑。

修正方案 #

第一步：将Store提为模块级单例 #

把Store创建逻辑移到组件外部，放在文件顶层，保证整个应用生命周期里只有1个Store实例，不会随组件重渲染被重建：

// 放在文件顶层，组件定义之前，仅初始化一次
const rootReducer = combineReducers({
  auth: credReducer,
});
const store = createStore(rootReducer);

function Root() {
  // 删掉原来组件内部的store创建、手动subscribe、同步tkn/type的本地useState逻辑
  // 直接通过useSelector从全局Store读取auth状态做路由判断
  const auth = useSelector(state => state.auth);

  return (
    <Provider store={store}>
      <NavigationContainer>
        {!auth.phone ? (
          <Auth />
        ) : auth.tp === "doctor" ? (
          <Doctor />
        ) : (
          <Vendor />
        )}
      </NavigationContainer>
    </Provider>
  );
}

第二步：去掉冗余的手动订阅逻辑 #

react-redux自带的useSelector本身就内置了状态订阅能力：只要绑定的Store状态发生更新，使用这个Hook的组件就会自动触发重渲染，拿到最新的状态值，完全不需要手动写store.subscribe同步本地状态。

内容的提问来源于stack exchange，提问作者Dhruv Rohatgi