3 액션 유형의 배열을 취하는 API 미들웨어를 사용하여 데이터를 가져 오는 중, action.type은 로거에서 정의되지 않았으며 상태는 한 번만 업데이트됩니다.

Question

real world example의 코드를 공식 redux 가이드에서 사용하고 있습니다.

REQUEST, SUCCESS 또는 FAILURE 가져 오기에 따라 reducers에 세 가지 작업을 전달하는 대신 API가 해석 한 세 가지 작업의 배열로 한 번의 호출을 보내서 수행합니다. loadUser() 예는 다음과 같습니다 : 예에서

import { CALL_API, Schemas } from '../middleware/api.jsx' 

export const USER_REQUEST = 'USER_REQUEST' 
export const USER_SUCCESS = 'USER_SUCCESS' 
export const USER_FAILURE = 'USER_FAILURE' 


function fetchUserAPI(id) { 
    return { 
    [CALL_API]: { 
     types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ], 
     endpoint: `/admin/user/${id}`, 
     schema: Schemas.USER 
    } 
    } 
} 

export function loadUser() { 
    return (dispatch, getState) => { 
    let id = getState().auth.user._id 
    return dispatch(fetchUserAPI(id)) 
    } 
} 

이 API 미들웨어는 다음과 같습니다

export default store => next => action => { 

    .... validations... 

    const callAPI = action[CALL_API] 
    let { endpoint } = callAPI 
    const { schema, types } = callAPI 

    function actionWith(data) { 
    const finalAction = Object.assign({}, action, data) 
    delete finalAction[CALL_API] 
    return finalAction 
    } 

    const [ requestType, successType, failureType ] = types 

    next(actionWith({ type: requestType })) 

    return callApiPositions(endpoint, schema).then(
    response => next(actionWith({ 
     response, 
     type: successType 
    })), 
    error => next(actionWith({ 
     type: failureType, 
     error: error.message || 'Something bad happened' 
    })) 
) 
} 

이론에서 next(actionWith(..)) 호출이 제대로 파견 것들, 요청 및 중 하나 성공/실패. 내 콘솔 로거 그러나

, 나는 무엇이든지

을 업데이트되지 않은, 그것은 로거에 표시된 상태를 검사 표시 최소한 방식으로, 하나의 undefined를 표시되어 활동하고 상태를보고하고

그러나 내 REDUX의 devtool에, 내가보고하고 조치가 제대로 전달되고 상태가 업데이트 될 것 같다 않습니다

내가 부팅 처음에 링크 된 공식 redux 예제를 사용하고 동일한 스타일의 API 페칭을 사용하고 모든 액션이 로거에서 적절하게 전달됩니다. 이는 redux devtools와 같은 두 가지 별도의 호출과 같습니다.

방금 ​​내 페이지를 새로 고쳤거나 루트 포인트에서 시작했는지 여부에 따라 상태가 업데이트되거나 업데이트되지 않을 수도 있기 때문에이 문제에 관해 의견을 모으고 있습니다. 나는 모든 행동이 적절하게 파견 되었다면 국가는 그것이 의도 한대로 확실히 갱신 될 것이라고 생각한다.

제안 사항?

Answer 1

미들웨어의 순서는 실제로 중요합니다. 마지막으로 logger이 필요합니다.

지금 로거는 API보다 먼저 작동합니다. 당신이

applyMiddleware(api, createLogger()), 

하지

applyMiddleware(createLogger(), api),