组件包装在 Provider 中，但出现此消息：找不到 react-redux 上下文值答案

【问题标题】：Component is wrapped in a Provider but this message appear: could not find react-redux context value组件包装在 Provider 中，但出现此消息：找不到 react-redux 上下文值
【发布时间】：2021-10-19 17:12:14
【问题描述】：

我想做一个store来保存id值，但是我家不能调用值。出现错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 中

商店：

import { createStore } from 'redux'

const INITIAL_STATE = {
    data: [
        684,
        683
    ],
}

function ids(state = INITIAL_STATE, action) {
    switch(action.type) {
        case 'ADD_ID':
            return {...state, data: [...state.data, action.id] };
            default:
                return state;
    }
}

const store = createStore(ids)

export default store;

idlist：

    import React from 'react'
    import { useSelector } from 'react-redux';
    
    function Idlist() {
        const ids = useSelector(state => state.data);
        return(
            [ids]
        )
    }
    
    export default Idlist;

我这样称呼它：

import Idlist from '../../components/Idlist';

function MainScreen() {

    return (
        <body>
            <main>
                <Idlist />
            </main>
        </body>
    )
}

export default MainScreen;

提供者在哪里：

import React from 'react'

import { Provider } from 'react-redux'
import store from './store';
import Idlist from './components/Idlist';

function App() {
  return (
    <Provider store={store}>
      <Idlist/>
    </Provider>
  );
}

export default App;

de MainScreen 的渲染位置：

import Signup from './Pages/Signup/Signup';
import MainScreen from './Pages/Home/MainScreen';

const routing = (
  <Router>
    <Switch>
      <Route exact path="/" component={Signup} />
      <Route path="/MainScreen" component={MainScreen} />
    </Switch>
  </Router>
)

ReactDOM.render(
  routing,
  document.getElementById('root')
);

reportWebVitals();

我不知道这里出了什么问题

【问题讨论】：

您能告诉我们提供者在哪里吗？
当然，我已经编辑了帖子
App 内的 IdList 看起来不错，所以我假设错误是由 MainScreen 中的 IdList 引发的。 MainScreen 相对于 App 呈现在哪里？
我认为 MainScreen 组件应该在 Provider 内呈现，因为 IdList 在 MainScreen 内呈现。
我现在把 MainScreen 在哪里

标签： javascript html reactjs redux react-redux

【解决方案1】：

使用Provider 组件包装routing。

例如

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import store from './store';
import { useSelector } from 'react-redux';

function Idlist() {
  const ids = useSelector((state: any) => state.data);
  console.log(ids);
  return <div>idlist</div>;
}

const Signup = () => <div>Signup</div>;
const MainScreen = () => (
  <div>
    <Idlist />
  </div>
);

const routing = (
  <Router>
    <Switch>
      <Route exact path="/" component={Signup} />
      <Route path="/MainScreen" component={MainScreen} />
    </Switch>
  </Router>
);

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

store.ts:

import { createStore } from 'redux';

const INITIAL_STATE = {
  data: [684, 683],
};

function ids(state = INITIAL_STATE, action: any) {
  switch (action.type) {
    case 'ADD_ID':
      return { ...state, data: [...state.data, action.id] };
    default:
      return state;
  }
}

const store = createStore(ids);

export default store;

【讨论】：