Redux useSelector报错：Cannot read properties of null (reading 'store')

核心问题原因 #

你在App组件里直接调用了useSelector，但App组件是包裹Provider的父组件，组件渲染时会先执行useSelector，此时Redux的Provider还没完成渲染，组件不在Redux上下文的作用域内，自然找不到store，触发null读取错误。

修复步骤 #

1. 移除App组件内的useSelector调用

把useSelector从App组件中删掉，App只负责用Provider包裹整个应用，不要在里面直接访问Redux状态。修改后的App.js：

import React from 'react';
import Babe from './Babe';
import Test from './navigate/Test';
import Hot from './navigate/Hot';
import Coffee from './navigate/Coffee';
import Tea from './navigate/Tea';
import FullCourse from './navigate/FullCourse';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import FullCourse2 from './navigate/FullCourse2';
import { Provider } from 'react-redux';
import store from './src/app/store';

const Stack = createStackNavigator();

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="In-Flight Services" component={Babe} />
          <Stack.Screen name="Cold Water" component={Test} />
          <Stack.Screen name="Hot Water" component={Hot} />
          <Stack.Screen name="Tea" component={Tea} />
          <Stack.Screen name="Coffee" component={Coffee} />
          <Stack.Screen name="Meal" component={FullCourse} />
          <Stack.Screen name="Meal2" component={FullCourse2} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

export default App;

2. 在Provider内部的子组件中使用useSelector

比如在Babe.js里访问Redux状态：

import React from 'react';
import { useSelector } from 'react-redux';

const Babe = () => {
  // 正确获取store中的show分支下的value值
  const data = useSelector(state => state.show.value);

  return (
    <div>{data}</div> // 这里会渲染初始值3，调用showData action后变成5
  )
}

export default Babe;

3. 修正Slice里的reducer写法

你的showData reducer写法有问题，Redux Toolkit用Immer处理 immutable 更新，直接修改state即可，不需要return赋值：

import { createSlice } from '@reduxjs/toolkit'

export const showslice = createSlice({
  name: 'showData',
  initialState: { value: 3 },
  reducers: {
    addData: () => {},
    showData: (state) => {
      // 直接修改state.value，Immer会自动处理 immutable 更新
      state.value = 5;
    }
  }
})

export const { addData, showData } = showslice.actions
export default showslice.reducer

4. 调用action更新状态（可选）

如果要触发showData action把value改成5，在子组件里用useDispatch：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { showData } from './src/features/showslice';

const Babe = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.show.value);

  useEffect(() => {
    // 组件挂载时调用action更新状态
    dispatch(showData());
  }, [dispatch]);

  return (
    <div>{data}</div> // 会渲染5
  )
}

export default Babe;

额外注意点 #

• 确保所有导入路径正确，你已经确认过这点，没问题。
• Store里的reducer键是show，所以useSelector里要通过state.show访问该slice的状态。

内容的提问来源于stack exchange，提问作者Bhavishya Tomer