React-Redux: 액션은 일반 개체여야 합니다.비동기 작업에 사용자 지정 미들웨어 사용
처리되지 않은 거부(오류):작업은 일반 개체여야 합니다.비동기 액션에 커스텀 미들웨어를 사용합니다.
댓글 하나하나 달려고 했는데그래서 fetch posts가 실행되면 모든 post에 대해 fetch comment API를 호출하고 싶습니다.
export function bindComments(postId) {
return API.fetchComments(postId).then(comments => {
return {
type: BIND_COMMENTS,
comments,
postId
}
})
}
비동기 요구가 종료된 후 디스패치해야 합니다.
이 방법은 다음과 같습니다.
export function bindComments(postId) {
return function(dispatch) {
return API.fetchComments(postId).then(comments => {
// dispatch
dispatch({
type: BIND_COMMENTS,
comments,
postId
});
});
};
}
저처럼 간단한 디테일을 흘려보내는 미래희망자라면, 제 경우 괄호 안에 있는 액션 기능을 호출하는 것을 잊어버렸을 뿐입니다.
actions.syslog:
export function addNewComponent() {
return {
type: ADD_NEW_COMPONENT,
};
}
myComponent.js:
import React, { useEffect } from 'react';
import { addNewComponent } from '../../redux/actions';
useEffect(() => {
dispatch(refreshAllComponents); // <= Here was what I've missed.
}, []);
액션 기능을 디스패치하는 것을 잊었습니다.()이렇게 해서 제 문제가 해결됐어요.
useEffect(() => {
dispatch(refreshAllComponents());
}, []);
이번에도 OP의 문제와는 관계가 없을지도 모르지만, 저와 같은 문제를 안고 있는 사람들을 돕고 싶습니다.
이 오류는 단순히 비동기 조작 처리에 도움이 되는 미들웨어를 그 사이에 삽입하도록 요구하는 것입니다.
다음과 같이 할 수 있습니다.
npm i redux-thunk
Inside index.js
import thunk from "redux-thunk"
import { createStore, applyMiddleware } from 'redux';
...createStore(rootReducers, applyMiddleware(thunk));
비동기 조작은 기능 내에서 동작합니다.
미들웨어 없이 가져오기 작업을 사용할 수 없습니다.작업은 일반 개체여야 합니다.redux-thunk 나 redux-saga 등의 미들웨어를 사용하여 가져오기를 수행한 후 다른 액션을 디스패치할 수 있습니다.
다음으로 redux-thunk 미들웨어를 사용한 비동기 처리의 예를 나타냅니다.
export function checkUserLoggedIn (authCode) {
let url = `${loginUrl}validate?auth_code=${authCode}`;
return dispatch => {
return fetch(url,{
method: 'GET',
headers: {
"Content-Type": "application/json"
}
}
)
.then((resp) => {
let json = resp.json();
if (resp.status >= 200 && resp.status < 300) {
return json;
} else {
return json.then(Promise.reject.bind(Promise));
}
})
.then(
json => {
if (json.result && (json.result.status === 'error')) {
dispatch(errorOccurred(json.result));
dispatch(logOut());
}
else{
dispatch(verified(json.result));
}
}
)
.catch((error) => {
dispatch(warningOccurred(error, url));
})
}
}
변경:
export const <youractionName> = async (dispatch) => {}
로.
export const <youractionName> = () => async (dispatch) => {}
이것으로 문제가 해결되었습니다.'() =>'을(를) 놓쳤습니다.
Arrow 기능을 사용하면 코드의 가독성이 향상됩니다.반품 불필요API.fetchComments요구가 완료되면 API 콜이 비동기화 됩니다.then답을 얻을 수 있을 거야, 거기서 넌 그냥dispatch유형 및 데이터.
아래 코드는 Arrow 기능을 사용하여 동일한 작업을 수행합니다.
export const bindComments = postId => {
return dispatch => {
API.fetchComments(postId).then(comments => {
dispatch({
type: BIND_COMMENTS,
comments,
postId
});
});
};
};
compose Enhancers를 추가하지 못한 것과 같은 문제가 있었습니다.설정이 완료되면 액션 크리에이터를 살펴볼 수 있습니다.이 에러는, 셋업 되어 있지 않은 경우에도 발생합니다.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(thunk))
);
redux-thunk를 사용하여 redux를 설정하고 다음과 같은 액션을 만듭니다.
export const actionName = (data) => dispatch => {
dispatch({
type:"ACTION_TYPE"
payload:"my payload"
})
}또, 미들웨어의 어레이에 있는 getDefaultMiddleware()를 잊어버렸을 수도 있습니다.추가 설치 불필요:
export const store = configureStore({
reducer: GlobalReducer,
middleware: (getDefaultMiddleware) => [
...getDefaultMiddleware(),
mainMiddleware,
],
});
미들웨어가 없으면 redux는 동기 데이터 흐름만 지원합니다.Ajax 요구를 작성하여 이 요구의 결과를 디스패치해야 할 경우 다음과 같은 비동기 작업을 처리하는 미들웨어를 사용해야 합니다.redux-promise,redux-thunk ★★★★★★★★★★★★★★★★★」redux-saga또는 자신만의 미들웨어를 작성할 수도 있습니다.
export default ({ dispatch }) =>
(next) =>
(action) => {
// check if there is payload in action. if not send it to the next middleware
if (!action.payload || !action.payload.then) {
return next.action;
}
// if we are here means we have action.payload. now check if it is promise
// wait for the promise to be resolved
action.payload.then(function (response) {
// overwrite the action
const newAction = { ...action, payload: response };
dispatch(newAction);
});
};
변경으로 인해 문제가 해결되었습니다.
내보내기 const = 비동기(비동기) = > {}
로.
내보내기 const = ( ) = > 비동기(비동기) = > {}
액션 정의
const selectSlice = () => {
return {
type: 'SELECT_SLICE'
}
};
액션 디스패치
store.dispatch({
type:'SELECT_SLICE'
});
정의된 작업의 개체 구조가 디스패치된 작업과 동일한지 확인하십시오.중에 .type.
redux-observatible을 사용하는 경우 작업이 관찰 가능을 반환하는지 확인합니다.margemap이 아닌 맵을 사용했기 때문에 문제가 발생하였습니다.
// error
export const myEpic = (action$: any) =>
action$.pipe(
ofType('...'),
map((x => x.payload),
map((x) => callAPi(x)),
)
// success
export const myEpic = (action$: any) =>
action$.pipe(
ofType('...'),
map((x => x.payload),
mergeMap((x) => callAPi(x)),
)
나는 한 잔 했다.setLoading
const [loading, setLoading] = useState(false)
그 이상은 삭제하지 않았습니다., 으로는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★setLoadinguseState" redex"의 reducedx"를합니다.이것을 삭제/이름 변경하면 문제가 해결됩니다.
이 코드로 동작하고 있고 이것이 새로운 반복이라면, 변수가 함수의 올바른 순서로 되어 있는지 확인합니다(이것은 나의 실수입니다).
즉, 이 에러가 발생한 코드
export const fetchProjects = newPage => (getState, dispatch) => NOPE
export const fetchProjects = newPage => (dispatch, getState) => OK YEAH
저 같은 경우, 몇 가지 값을 redux 스토어에 저장하지 않고 서버에 보내고 싶었기 때문에 유형을 사용하거나 마지막에 아무것도 디스패치하지 않았습니다.하지만 나는 즉시 행동을 취하라고 명령했다.그래서 내가 해야 할 일은 디스패치를 제거하는 것뿐이었다. 왜냐하면 그것은 실제 행동이 아니었기 때문이다.그냥 함수일 뿐이야
제 경우 해결방법은redux-thunk스토어 내에서 middleware로 했습니다.
콘솔 내부:
import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';
const middlewares = [ReduxThunk];
const store = createStore(
reducerData,
compose(applyMiddleware(...middlewares)),
);
export default store;
화살표 함수 구문
export const bindComments = (postId) => dispatch => {
return API.fetchComments(postId).then(comments => {
// dispatch
dispatch({
type: BIND_COMMENTS,
comments,
postId
})
})}
이 오류는 주로 액션을 디스패치할 때 액션이 오브젝트를 반환하지 않을 때 발생합니다.예를 들어 increment 버튼을 클릭했을 때 숫자 값을 증가시키기 위해 사용하는 increment 함수가 있습니다. const increment = () => type: INCREMENT 기능이다.onClick={() => dispatch(increment)} ()function inside terminal inside dispatch function inside dispatch function dispatch inside 이유 디스패치 함수는 함수 이름이 아닌 객체를 요구합니다...
이 에러는 액션 크리에이터에서 비동기 API 호출을 할 때 발생합니다.액션 크리에이터를 동기 액션 크리에이터에서 비동기 액션으로 변환해야 합니다.이 변환은 미들웨어를 사용하면 가능하므로 미들웨어 없이 Redux에 대해 자세히 설명하겠습니다.
Sync Action Creator VS Async Action Creator 두 가지 유형의 작업 작성자가 있습니다. 이 오류를 없애려면 동기 액션을 비동기 액션으로 변경해야 합니다.이것은 미들웨어로 실행할 수 있습니다.
그래서 해결책은 비동기 요구가 완료된 후 디스패치하는 것입니다.
export function bindComments(postId) {
return function(dispatch) {
return API.fetchComments(postId).then(comments => {
// dispatch
dispatch({
type: BIND_COMMENTS,
comments,
postId
});
});
};
}
「 」를 실행하고 때는 든지.async를 사용한 exxx를 . redux-thunk
오류:
action.displaces
export const login = () => async (dispatch, getState) => {}
아프다.
import reducerData from './store-reducer';
import {createStore} from 'redux';
const middlewares = [ReduxThunk];
const store = createStore(
reducerData,
);
export default store;
솔루션:
import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';
const middlewares = [ReduxThunk];
const store = createStore(
reducerData,
compose(applyMiddleware(...middlewares)),
);
export default store;
이 실수의 원인은 나를 당황하게 만들었다.
액션 작성자가 동기화되어 있는데도 디스패치가 테스트에서 실패했습니다.알고 보니 나는 액션 크리에이터를 조롱하고 있었고, 이것이 액션 크리에이터가 그것 때문에 돌아오지 않았을 때 그가 준 오류였다.
언급URL : https://stackoverflow.com/questions/46765896/react-redux-actions-must-be-plain-objects-use-custom-middleware-for-async-acti
'programing' 카테고리의 다른 글
| AngularJS 지시적 워치 유효성 (0) | 2023.03.06 |
|---|---|
| ng-show/ng-hide에서 Angular 애니메이션 발생 방지 (0) | 2023.03.06 |
| 내용 높이에 따라 iframe 높이 크기 조정 (0) | 2023.03.06 |
| 여러 줄의 환경 변수 형식을 적절하게 도커 구성하려면 어떻게 해야 합니까? (0) | 2023.03.06 |
| 새 URL을 푸시할 때 React 구성 요소 렌더가 여러 번 호출됩니다. (0) | 2023.03.06 |