Redux Thunk middleware 在應用程序中定義異步操作方法，thunk creator 是一個 function讓我們能夠處理非同步操作，用 dispatch 和 getState 作為參數，透過 thunk 可以控制發送 dispatch一個 action，因此適合用來處理非同步取得的資料狀態。使用 redux-thunk 時，action creators 回傳的不是物件，而是一個帶有 dispatch, getState, Argument 參數的非同步函數，並在這個非同步函數會再去執行 dispatch action，來通知到 reducer。

今天介紹如何使用axios和redux thunk定義異步操作創建器，向api端點發出get 請求，並顯示獲取的數據。

1.先安裝axios和redux-thunk

npm i axios redux-thunk

Axios：它將用於向api端點發出get請求。
redux-thunk：允許我們在應用程序中定義異步action creator。

2.將redux-thunk middleware應用到store

2-1 先 import redux-thunk
2-2 然後將它傳遞給middleware函數。

store.js

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk';
import rootReducer from './reducer';

const store = createStore(rootReducer,applyMiddleware(thunk) );

export default store;

3.定義異步action creator

export const fetchUsers =()=>{
    return(dispatch) =>{
        dispatch(fetchUserRequest)
        axios.get('https://jsonplaceholder.typicode.com/users')
           .then (Response =>{
            const users = response.data
            dispatch(fetchUserSuccess(users))
           })
           .catch(error =>{
             const errorMsg = error.message
             dispatch(fetchUserFailure(errorMsg))
           })
    }
}

建立一個fetchUsers函數，通過thunk fetch返回另一個函數，接收dispatch方法作為其參數，用 Axios進行請求，向JSON Placeholder get Users數據，如果請求成功返回用戶數據，如果失敗返回errorMsg。

const initialState= {
    loading:false,
    userS:[],
    error:'',
}

 const fetchUserRequest = () =>{
    return{
        type:FETCH_USERS_REQUEST,
    }
}
 const fetchUserSuccess = (users) =>{
    return{
        type:FETCH_USERS_SUCCESS,
        payload:users,
    }
}
 const fetchUserFailure = (error) =>{
    return{
        type:FETCH_USERS_FAILURE,
        payload:error,
    }
}

export const fetchUsers =()=>{
    return(dispatch) =>{
        dispatch(fetchUserRequest)
        axios.get('https://jsonplaceholder.typicode.com/users')
           .then (Response =>{
            const users = response.data
            dispatch(fetchUserSuccess(users))
           })
           .catch(error =>{
             const errorMsg = error.message
             dispatch(fetchUserFailure(errorMsg))
           })
    }
}

const reducer = (state = initialState,action)=>{
    switch(action.type){
        case FETCH_USERS_REQUEST:
            return {
                ...state,
                loading:true,
            }
        case FETCH_USERS_SUCCESS:
             return {                
                loading:false,
                users:action.payload,
                error:''
            }
        case FETCH_USERS_FAILURE:
            return {                
               loading:false,
               users:[],
               error:action.payload,
           }
        default: return state   
    }
}

export default reducer