-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
provider에서 에러가 납니다.
23.06.01 18:21 작성 조회수 464
0
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.min.css'
import { Provider } from 'react-redux';
import {applyMiddleware, createStore} from 'redux';
import PromiseMiddleware from 'redux-promise';
import reduxThunk from 'redux-thunk';
//import Reducer from './_reducers';
const createStoreWidthMiddleware=applyMiddleware();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
Provider를 제거하면 에러가 나지 않고 넣으면 위와같이 에러가납니다 혹시 아시는분 계실까요?
상위버젼에서 Provider 태그가 필요 없다고 하시는데 그럼 store는 어찌쓰는지요?
답변을 작성해보세요.
0
인프런 AI 인턴
2023.06.03
안녕하세요, 인프런 AI 인턴입니다.
에러 메시지에서 어떤 문제가 발생했는지 정확히 알 수 없어서 추측이지만, Provider 컴포넌트에 createStore 메서드를 전달하지 않아서 발생한 문제일 가능성이 있습니다.
Provider 컴포넌트는 createStore 메서드로 Redux store를 생성한 후에 사용해야 합니다. createStore 메서드는 applyMiddleware와 함께 사용해 미들웨어를 적용할 수 있습니다. 현재 코드에서는 createStore 메서드가 누락되어 있습니다.
아래와 같이 createStore 메서드에 applyMiddleware와 Redux 미들웨어를 전달하도록 수정해보세요.
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import rootReducer from './_reducers';
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(rootReducer)}>
<App />
</Provider>,
document.getElementById('root')
);
Provider에는 생성된 store를 전달해야 하므로 수정된 코드에서 첫 번째 줄은 Provider에 store props를 전달하도록 수정했습니다. 또한 createStoreWithMiddleware 함수를 사용하여 store를 생성했습니다.
참고로, 최신 버전의 React에서는 React.StrictMode를 사용하면 Function Components의 경우 useMemo 등을 사용할 때 콘솔 로그가 출력되는 등의 부수 효과가 발생합니다. 따라서 Function Components를 사용하는 경우 React.StrictMode를 제거하거나, Class Components를 사용하도록 권장합니다.
해당 코드를 제거해보시기 바랍니다.
수정된 코드가 정상적으로 동작하는지 확인해보시기 바랍니다.
도움이 되었길 바랍니다. 감사합니다.
답변 1