これが私が遊んでいるコードです
import {createStore、applyMiddleware} from'redux ' import thunk from'redux-thunk' import axios from'axios ' const initialState = { ユーザー:{}、 リクエスト:false、 エラー: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(アクション)+ '\ n\tprevious: '+前の+ '\n\tcurrent: '+ JSON.stringify(store.getState()) ) } const store = createStore(reducer、applyMiddleware(logger、thunk)) store.dispatch((dispatch)=> { dispatch({type: 'REQ_USER_INIT' }) //偽のオンラインRESTテストとプロトタイピング用のAPI // urlを分割してエラー応答を取得 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
応答が受信されたら。 2つのアクションをログに記録する必要がありますが、3つ取得します。2番目のアクションはundefined
であり、原因を突き止めるのに苦労しています。 redux-thunkのバグですか、それとも何か間違ったことをしていますか?
これが私のコンソールからの出力です。
アクション:{"type": "REQ_USER_INIT"} ・前:{"user":{}、 "requesting":false、 "err":null} ・現在:{"user":{}、 "requesting":true、 "err":null} アクション:undefined ・前:{"user":{} 、 "requesting":false、 "err":null} ・current:{"user":{}、 "requesting":true、 "err":null} アクション:{" type ":" REQ_USER_DATA "、" user ":{" id ":1、" username ":" Bret "、" email ":" [email protected] "}} ・前:{" user ":{}、" requesting ":true、" err ":null} ・current:{" user ":{" id ":1、" username ":" Bret "、" email ":" [email protected] "}、" requesting ":false、" err ":null}
ミドルウェアの順序が重要です。 logger
を最後にしてみてください
const store = createStore(reducer, applyMiddleware(thunk, logger))