Redux TypeError: 정의되지 않은 속성 '적용'을 읽을 수 없습니다.
react devtools 및 redux devtools를 비활성화했습니다.
몇 시간 동안 이 문제를 해결할 방법을 찾고 있는데, 대부분의 문제는 코드를 전혀 바꾸지 않고 구성되고 있습니다.
import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState={};
const middleware = [thunk];
const store = createStore(rootReducer,initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
왜 이런 일이 일어났는지 정말 이해가 안 돼요.아무것도 변경하지 않고 마지막으로 한 일은 저장소로 git pushorigin master를 실행하는 것입니다.그리고 컴파일 할 때 갑자기 다음 오류가 나타납니다.
Im 프런트 엔드에서 사용:
"@material-ui/core": "^3.3.1",
"@material-ui/icons": "^3.0.1",
"axios": "^0.18.0",
"jwt-decode": "^2.2.0",
"prop-types": "^15.6.2",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-redux": "^5.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5",
"react-select": "^2.1.1",
"recharts": "^1.3.5",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"typeface-roboto": "0.0.54"
백엔드:
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"mongoose": "^5.3.11",
"multer": "^1.4.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^10.9.0",
"xlsx": "^0.14.1"
},
"devDependencies": {
"concurrently": "^4.0.1",
"nodemon": "^1.18.6",
},
결과 오류:
리덕스:
레덕스 개발 도구를 2.16.0에서 2.16.1로 업데이트
또는
코드에서 이 행을 제거합니다.
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
제 웹 앱을 신분을 알 수 없는 창에서 테스트하고 싶을 때도 같은 문제가 있었습니다(신분을 알 수 없는 창에서는 확장자가 표시되지 않습니다).
The issue is that 문제는 말이다compose부에서redux모든 주장을 뒷받침할 것으로 기대하고 있다.는 모든 인수가 함수가 될 것으로 예상합니다. So when 그래서 언제
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
는 해당 환경에서 평가되며 부울을 반환합니다.
@knutwalker가 말했듯이아무것도 반환하지 않는 함수를 반환해야 합니다.이것으로 나는 해결되었다구
window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
The last stack shows a call to compose in 마지막 스택은 설정하는 콜을 나타내고 있습니다.client/src/store.js:9 where the second argument is 여기서 두 번째 인수는window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__().
그러나 장치 도구가 비활성화되면 러 나 dev 활 는 우 if youtoolstools, however)__REDUX_DEVTOOLS_EXTENSION__정의되지 않고 함수를 구성하는 두 번째 인수가 됩니다.이는 생략에 의해 암묵적으로 정의되지 않는 것과 달리 명시적으로 제공되기 때문에 compose 구현은 두 개의 유효한 인수가 있다고 생각하고 정의되지 않은 함수가 될 것으로 예상합니다.
createStore 함수를 만족시키기 위해 정확한 시그니처가 무엇인지 잘 모르겠지만 devtools가 없는 경우에는 더미 함수를 반환해야 합니다.
window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (a) -> a
저는 Chrome에 redex-devtools 확장을 추가했는데 브라우저에 redex-devtools를 추가하자마자 오류가 사라졌습니다.또한 3진 연산자를 사용할 필요도 없습니다.
https://github.com/reduxjs/redux/issues/2359#issuecomment-362340634
내가 이 문제를 해결하는 가장 좋은 방법은 내 경우 단순하다.
sypress는 redux devtools를 포함한 확장이 없는 개발자 모드에서 크롬을 엽니다.
따라서 Chrome 창이 열리고 오류가 발생하면 메뉴> more tools > Extensions 순으로 클릭한 후 에서 chrome Webstore로 이동하여 redux devtools를 설치합니다.
이 오류의 원인은 질문 자체에 있습니다.React 및 Redux DevTools 확장을 활성화하기만 하면 됩니다.같은 오류에도 효과가 있었어요.
나는 변했다
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
다음과 같이 입력합니다.
typeof window.__REDUX_DEVTOOLS_EXTENSION__ === "undefined"
? a => a
: window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
그리고 문제는 해결되었다.
오류 발생 전:
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleWare = [thunk];
const store = createStore(rootReducer, initialState, compose(
applyMiddleware(...middleWare),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
export default store;
제거 후 오류:
Store.js에서 삭제해야 합니다.
window.REDUX_DEVTOOLS_EXTENSION & 창.REDUX_DEVTOOLS_EXTENSION()
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleWare = [thunk];
const store = createStore(rootReducer, initialState, compose(
applyMiddleware(...middleWare)
));
export default store;
저도 비슷한 문제에 직면했어요 그리고 이 선을 제거하면 효과가 있었어요
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
그러나 redux dev 툴을 다시 사용하려면 이러한 라인이 필요합니다.대신 사용
process.env.NODE_ENV==="development" ?
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,
날씨 체크에 env 변수를 사용하여 Reduxdev 툴 미들웨어를 사용할지 여부를 확인합니다.이 스레드에서 이 솔루션을 본 적이 없기 때문에 누군가에게 도움이 되었으면 합니다.
제 경우, 이 오류로 인해 모바일 브라우저의 프로덕션 빌드에 공백/흰색 화면이 표시되었지만 데스크톱 브라우저에는 표시되지 않았습니다.수락된 답변이 나에게 작동하지 않았습니다. 나는 compose를 사용하기 위해 행을 제거하고 devtools 확장을 추가하고 refactor를 추가해야 했습니다.DevTools Import를 사용합니다.즉, @Roman의 답변은 저에게 충분한 해결책이었습니다(감사합니다).그러나 다른 사람들이 이 문제가 레독스가와는 무관하게 발생할 수 있다는 것을 명확히 하는 데 도움이 될 수 있다.내 앱은 기본적인 리덕스 트렁크를 사용하고 있었다.개발 종속성으로 redux-devtools-extension을 설치한 후 다음을 교체했습니다.
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
if (nodeEnv !== 'production') {
const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware)));
} else {
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
),
);
}
export default store;
다음과 같이 입력합니다.
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
그리고 그것은 그것을 고쳤다.
이 에러의 원인은 다음과 같습니다.
const store=createStore(rootreducer,
initialstate,
compose(applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)
프로젝트를 전개할 때는, 다음의 조작을 실시하지 않았습니다.
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
중npm run build그거 꼭 빼주세요.
올바른 방법은 다음과 같습니다.
const store=createStore(rootreducer,
initialstate,
compose(applyMiddleware(...middleware))
)
이 회선의 변경
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
로.
window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
문제를 해결할 수 있을 것 같아서 도움이 됐어요.
[ Manage Extension ]> [ Redux DevTools ( details ) ]> [ Site access ]으로 이동하여 사이트 액세스를 모든 사이트 또는 특정 사이트로 변경합니다.
이 문제는 Redex DevTools 버전 2.17.0에서 발생했습니다.
내선번호가 고장났어요.
방금 쵸메에서 연장기를 떼고 다시 설치했는데 아주 잘 작동했어요.
이 방법은 효과가 있었습니다.
이 에러의 원인은 다음과 같습니다.
const store=createStore(rootreducer,
initialstate,
compose(applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)
프로젝트를 전개하는 동안 다음과 같이 마지막 행을 삭제합니다.
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
npm run build 명령어를 실행할 때 반드시 삭제해 주세요.올바른 방법은 다음과 같습니다.
const store=createStore(rootreducer,
initialstate,
compose(applyMiddleware(...middleware))
)
Chrome incognito 창에서 동일한 오류가 발생.일반 크롬으로 변경되어 모두 정상적으로 동작.
이것은 나에게 효과가 있는 @Koop의 완전한 대답입니다.
node_modules/redux/es/redux.js에서 "TypeError: Uncannot property 'apply' of undefined"가 발생하는 모든 사용자의 경우: 오류:즉시 수정: 모든 브라우저에 대해 Chrome 확장 Redx Devtools 영구 수정 프로그램을 설치합니다.
- 클라이언트 디렉토리에서 npm install --save-dev redux-devtools-extension
- client/src/store/index.js를 다음과 같이 변경합니다.
import { applyMiddleware, createStore, } from ‘redux’;
import createSagaMiddleware from ‘redux-saga’;
import rootReducer from ‘./reducers/index’;
import rootSaga from ‘./sagas/index’;
import { composeWithDevTools } from ‘redux-devtools-extension’;
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
export default store;
다음 코드 행을 삭제하라는 답변의 경우
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
우선, 그 기능에 대해 설명하겠습니다.크롬의 Redux Devtools 확장을 Redux 스토어에서 연결할 수 있는지 확인합니다.
확장 사용 안 함
- ★★★★★★★★★★★★★★★로 이동
chrome://extensions. - 이 확장을 찾아 비활성화합니다.
- Chrome Developer 툴을 열어 앱을 새로 고칩니다.
- 「」라고 입력합니다.
window.__REDUX_DEVTOOLS_EXTENSION__「」, 「」가 됩니다.undefined주의: 이것도 Incognito 창의 경우입니다.
확장 기능을 유효하게 하다
- ★★★★★★★★★★★★★★★로 이동
chrome://extensions. - 이 확장을 찾아 활성화합니다.
- Chrome Developer 툴을 열어 앱을 새로 고칩니다.
- 「」라고 입력합니다.
window.__REDUX_DEVTOOLS_EXTENSION__콘솔에서 함수 정의를 반환해야 합니다.
IMO는 앱 디버깅 목적으로 이 확장자를 더 이상 사용하지 않을 경우에만 제거해야 합니다.디버깅을 무효로 한다고 해서, 디버깅을 위해서 코드로 접속할 수 있는 기능이 완전하게 삭제되는 것은 아닙니다.
다음으로 이 회선의 기능을 파악하고 향후 디버깅에 필요한 경우 언제든지 이 내선번호를 사용할 수 있는 경우와 사용할 수 없는 경우의 양쪽 모두에 대응해야 합니다.이 경우 코드 자체를 삭제하고 접속할 필요가 없습니다.
기본 스토어 설정
다음과 같이 Basic Store 설정이 있는 경우, 미들웨어나 인핸서를 사용하지 않습니다.
const store = createStore(
reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
수 , 할 수 , 할 수 없는 경우 할 수 있는지, 도 하지 않는지 합니다.은, 「」, 「」, 「」, 「」, 「」, 「」, 「」를 의미합니다.undefinedcreateStore이 되는 것 undefined케이스와 코드는 정상적으로 동작합니다.
고급 저장소 설정
다음과 같이 Advanced Store 설정이 있는 경우, 예를 들어 미들웨어 또는 인핸서를 사용하여applyMiddleware '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,compose
const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware)
));
를 사용하여 compose (의 상황입니다.)
const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
));
compose그 논거가 다음과 같기를 바란다functiondevtools 확장을 입력하고 찾을 수 있습니다.undefined그리고...undefined예를 들어, 그것은 사용하려고 할 수 있는 것은undefined.applymethod 및 오류 발생.이것이 문제의 근본 원인입니다.
솔루션 - 완전하지 않음
많은 사람이 대답한 대로window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
정의되지 않은 경우에는 실행됩니다.(f => f).apply정상적으로 실행됩니다.하지만 이건 더 큰 속임수야compose해킹으로 보입니다.
솔루션 - 완전
compose를 사용할지 여부를 결정할 수 있는 방법이나 compose 방식을 강화할 수 있는 방법이 있다면.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));
지금 확인할 필요는 없습니다.window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()왜냐하면 그것은 에서 처리되어 왔기 때문이다.window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
이 코드는, 내선 번호가 유효 또는 무효가 되어 있는 경우에 확인할 수 있습니다(상기 스텝).이것은 문제없이 정상적으로 동작합니다.
이러한 코드 조각은 모두 Redux devtools Readme 파일에서 가져온 것입니다.
이러한 코드는 개발/로컬 환경에 대한 디버깅 전용입니다.프로덕션의 경우 조건을 추가하여 제외할 수 있습니다.
언급URL : https://stackoverflow.com/questions/53514758/redux-typeerror-cannot-read-property-apply-of-undefined
'bestsource' 카테고리의 다른 글
| 여러 시스템의 일원화된 사용자 관리 시스템을 위한 최적의 솔루션 (0) | 2023.03.10 |
|---|---|
| Angular-Translate를 사용하여 HTML을 포함하는 문자열을 처리하는 방법 (0) | 2023.03.10 |
| JSON 객체와 JavaScript 객체의 차이점은 무엇입니까? (0) | 2023.03.10 |
| intellij - 스프링이 인식되지 않음(매핑되지 않은 스프링 구성) (0) | 2023.03.10 |
| Angular $http가 PUT/POST 대신 OPTIONS를 보내고 있습니다. (0) | 2023.03.10 |