REDUX-썽크 발송 방법은 그래서 여기에 정의되지 않은 행동

Question

를 발생 내가

 

    import { createStore, applyMiddleware } from 'redux' 
    import thunk from 'redux-thunk' 
    import axios from 'axios' 

    const initialState = { 
     user: {}, 
     requesting: false, 
     err: null 
    } 

    const reducer = (state = initialState, action) => { 
     switch (action.type) { 
      case 'REQ_USER_INIT': return { ...state, requesting: true } 
      case 'REQ_USER_DATA': return { ...state, requesting: false, user: action.user } 
      case 'REQ_USER_ERR': return { ...state, requesting: false, err: action.err } 
     } 
     return state; 
    } 

    const logger = (store) => (next) => (action) => { 
     let previous = JSON.stringify(store.getState()) 
     next(action) 
     console.log(
      'action: ' + JSON.stringify(action) + 
      '\n\tprevious: ' + previous + 
      '\n\tcurrent: ' + JSON.stringify(store.getState()) 
     ) 
    } 

    const store = createStore(reducer, applyMiddleware(logger, thunk)) 

    store.dispatch((dispatch) => { 
     dispatch({ type: 'REQ_USER_INIT' }) 

     // Fake Online REST API for Testing and Prototyping 
     // break url to get an error response 
     let usersEndpoint = 'https://jsonplaceholder.typicode.com/users/1' 

     axios.get(usersEndpoint) 
      .then((response) => { 
       dispatch({ 
        type: 'REQ_USER_DATA', 
        user: { 
         id: response.data.id, 
         username: response.data.username, 
         email: response.data.email, 
        } 
       }) 
      }) 
      .catch((error) => { 
       dispatch({ 
        type: 'REQ_USER_ERR', 
        err: error.message 
       }) 
     }) 
    }) 

을 가지고 노는거야 코드 나는 그것이 매우 간단합니다 생각입니까? 응답을 받으면 REQ_USER_INIT을 파견 한 다음 REQ_USER_DATA을 파견합니다. 나는 두 가지 행동을 기록해야한다. 그러나 나는 3을 얻는다. 두 번째 행동은 undefined이고 나는 그 원인을 알아 내려고 노력하고있다. redux-thunk이있는 버그입니까? 아니면 제가 잘못하고 있습니까?

다음은 내 콘솔의 출력입니다.

 

    action: {"type":"REQ_USER_INIT"} 
    ·previous: {"user":{},"requesting":false,"err":null} 
    ·current: {"user":{},"requesting":true,"err":null} 
    action: undefined 
    ·previous: {"user":{},"requesting":false,"err":null} 
    ·current: {"user":{},"requesting":true,"err":null} 
    action: {"type":"REQ_USER_DATA","user":{"id":1,"username":"Bret","email":"Sincere@april.biz"}} 
    ·previous: {"user":{},"requesting":true,"err":null} 
    ·current: {"user":{"id":1,"username":"Bret","email":"Sincere@april.biz"},"requesting":false,"err":null} 

Answer 1

미들웨어 순서는 중요합니다. 시도해보십시오 logger 마지막

const store = createStore(reducer, applyMiddleware(thunk, logger))