useDispatch() 오류: react-redux 컨텍스트 값을 찾을 수 없습니다.컴포넌트가 로 둘러싸여 있는지 확인하십시오.

useDispatch() 오류: react-redux 컨텍스트 값을 찾을 수 없습니다.컴포넌트가 로 둘러싸여 있는지 확인하십시오.

React-Redux 라이브러리를 사용하려고 하는데 제목에 오류가 나타납니다.Provider로 컴포넌트를 랩했지만 useDispatch() 훅을 구현한 경우에만 오류가 발생합니다.

use Dispatch() 행을 추가할 때까지 앱은 정상적으로 동작했습니다.디스패치 기능에 관한 나머지 행은 삭제해도 같은 에러가 발생합니다.

도와주시면 감사하겠습니다.감사해요.

코드는 다음과 같습니다.

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Navigator from './navigation/Navigator';

import React, {useEffect, useState, useCallback} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

import {createStore, combineReducers} from 'redux';
import {Provider, useDispatch} from 'react-redux';
import dataReducer from './store/reducers/dataReducer';
import {CONSTANTS} from './constants/constants';
import {saveInitialData} from './store/actions/dataActions';

const App = () => {
  const [fetched, setFetched] = useState(initialState);

  const dispatch = useDispatch();

  const saveInitialDataHandler = useCallback(data => {
    dispatch(saveInitialData(data));
    callback;
  }, []);

  const rootReducer = combineReducers({
    content: dataReducer,
  });

  const store = createStore(rootReducer);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    fetch(CONSTANTS.database)
      .then(response => response.json())
      .then(responseJSON => {
        setFetched(true);
        saveInitialDataHandler(responseJSON);
      });
  };

  if (!fetched) {
    return (
      <Provider store={store}>
        <View stlye={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text></Text>
        </View>
      </Provider>
    );
  } else {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <SafeAreaView style={styles.SafeAreaView}>
            <Navigator></Navigator>
          </SafeAreaView>
        </NavigationContainer>
      </Provider>
    );
  }
};

const styles = StyleSheet.create({
  SafeAreaView: {flex: 1},
});

export default App;

App를 사용하고 있기 때문에, 프로바이더로 둘러싸야 합니다.useDispatch지금은 어린애일 뿐이야 Provider는 콘텍스트를 설정하여 콘텍스트에 대한 접근권을 부모 콘텍스트가 아닌 자녀만 가질 수 있도록 합니다.

하나의 솔루션은 래퍼 컴포넌트를 작성하는 것입니다.

const AppWrapper = () => {
  const store = createStore(rootReducer);

  return (
    <Provider store={store}> // Set context
      <App /> // Now App has access to context
    </Provider>
  )
}

const App = () => {
  const dispatch = useDispatch(); // Works!
...

Provider를 App.js 파일로 Import 했을 수 있습니다.공급자를 index.js 파일로 가져와야 합니다.

/*index.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store/reduxStore';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

실행 시 이 오류가 발생할 경우npm run test문제는 테스트 파일과 관련이 있습니다.

의 갱신 또는 교환app.test.tsx아래 암호로

주의: 잊지 말고 설치하세요redux-mock-store아직 모르시다면요.

import React from 'react';
import { render } from '@testing-library/react';

import App from './App';

import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';

describe('With React Testing Library', () => {
    const initialState = { output: 10 };
    const mockStore = configureStore();
    let store;

    it('Shows "Hello world!"', () => {
        store = mockStore(initialState);
        const { getByText } = render(
            <Provider store={store}>
                <App />
            </Provider>
        );

        expect(getByText('Hello World!')).not.toBeNull();
    });
});

1시간 동안 검색한 결과 이 솔루션이 나왔습니다.OSTE 덕분에

오리지널 솔루션:Github 문제 / 8145 및 솔루션 링크

---

이 솔루션에서는 TypeError: window.matchMedia는 함수가 아닙니다.이러한 행을 에러에 추가합니다.setupTests.ts파일. 오리지널 솔루션 링크 stackoverflow.com/a/64872224/5404861

global.matchMedia = global.matchMedia || function () {
  return {
    addListener: jest.fn(),
    removeListener: jest.fn(),
  };
};

리액션 네이티브 앱과 동일한 index.js 파일로 이 작업을 수행했습니다.이렇게 하면 앱을 공급자에게 래핑하기 위해 다른 파일을 내보내고 추가할 필요가 없습니다.

const ReduxProvider = () => {
    return(
        <Provider store={store}>
            <App />
        </Provider>
    )
}

AppRegistry.registerComponent(appName, () => ReduxProvider);

내가 리액트 컴포넌트를 함수로 호출했을 때 가상 돔으로 사용하지 않고 Comp를 독립적으로 호출하여 어떤 요소의 자식으로 렌더링하지 않았다.

function Comp() {
  const a = useSelector(selectA); // throws error
}
Comp();

그래서 제 경우 솔루션은 Comp와 컴포넌트를 호출하는 것이지 함수로 호출하는 것이 아니었습니다.<Comp />

import store from "../redux/Store";

store?.dispatch(actions.setSocket({ socket }));

먼저 액션을 저장합니다.컴포넌트가 프로바이더에 보존되어 있지 않은 경우는, 그 스토어에서 디스패치를 사용합니다.

전화를 걸 수 없습니다.

const dispatch = useDispatch()

용기 내부에 없는 컴포넌트 내

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

올바른 예:

const App = ({ Component, pageProps }: AppPropsWithLayout) => {
  const page = (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )

  if (Component.getLayout) {
    return <Provider store={store}>Component.getLayout(page)</Provider>
  }

  return (
    <Provider store={store}>
      <MainLayout>{page}</MainLayout>
    </Provider>
  )
}

언급URL : https://stackoverflow.com/questions/60329421/usedispatch-error-could-not-find-react-redux-context-value-please-ensure-the