React接入Redux后页面刷新报找不到Provider上下文错误如何解决？

问题描述 #

开发首个React应用时，随着组件间状态传递逻辑复杂度提升，引入Redux做状态管理。参考官方文档和线上教程完成配置后，正常操作无异常，但刷新页面就会触发应用崩溃，报错：Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>。

相关代码 #

index.js #

import React from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

store.js #

import { configureStore } from '@reduxjs/toolkit';

import userReducer from "features/user";
import userInterfaceReducer from 'features/userInterface';

export const store = configureStore({
    reducer: {
      user: userReducer,
      userInterface: userInterfaceReducer,
    }
  })

slice reducer代码 #

用户状态slice

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: "user",
    initialState: { value: {userType: "", fName: "", lName: ""}},
    reducers: {
        user: (state, action) => {
            state.value = action.payload;
        }
    }
})

export default userSlice.reducer;

UI交互状态slice

import { createSlice } from "@reduxjs/toolkit";

export const userInterfaceSlice = createSlice({
    name: "open",
    initialState: { value: false}, // 该状态用于控制多个页面都用到的抽屉开关
    reducers: {
        toggleOpen: (state, action) => {
            state.value = action.payload;
        },
    }
})

export const { toggleOpen } = userInterfaceSlice.actions;

export default userInterfaceSlice.reducer;

问题表现 #

已查阅数十篇相关帖子，尝试多个公开解决方案，多次重启应用后问题仍未解决。代码逻辑本身运行正常，可正常访问、更新状态，多页面跳转时状态也能保持同步，但只要刷新任意使用了useSelector的页面，应用就会崩溃。Redux DevTools在刷新前无报错，刷新后提示No store found. Make sure to follow the instructions.。

解决方案 #

后续通过定位排查，最终找到解决方法：最初按照教程将Redux Provider在index.js中包裹App组件，将Provider移到App组件内部后，问题彻底解决。

内容的提问来源于stack exchange，提问作者Thomas Chardon