1.  為什麼要用中介軟體

Action 發出以後，Reducer 立即算出 State，這叫做同步；

Action 發出以後，過一段時間再執行 Reducer，這就是非同步。

中介軟體就是讓 Reducer 在非同步操作結束後自動執行

store/index.js 

1. 引入 redux-thunk

import {createStore,applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk'
import reducer from './reducer';
const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk),
    // other store enhancers if any
    );
const store = createStore(reducer, enhancer);

export default store;
 

2.  元件內使用者執行動作

const mapDispatchToProps = (dispatch) => {
    return {
        handleFocus() {
            dispatch(actionCreators.getList()); // 非同步獲取資料
        },
    }
}

3.  dispatch(action)  想要actionCreators返回函式,必須使用redux-thunk

const changeList = (data) => ({
        type:actionTypes.GET_LIST,
        data: fromJS(data) // 這裡傳過去的陣列也要轉換成immutable陣列
})
   
export const getList = ()=> { // 非同步獲取資料返回一個函式,而不是一個物件
        return (dispatch) =>{
                axios.get('/api/headerList.json').then((res)=>{
                        // create-react-app 底層是node的伺服器
                        // 當你訪問介面的時候,它會先到工程目錄(src)去看有沒有路由
                        // 如果沒有找到, 它還會在public公共目錄下去找  
                        dispatch(changeList(res.data.data))
                }).catch((e)=>{
                        console.log(e)
                })
        }    
}
 

4.  模擬資料 (這裡可以自己寫一些資料,模擬, 等後臺有資料再換,事前溝通好資料型別)

為什麼可以寫在public下面 :

因為create-react-app 底層是node的伺服器  , 當你訪問介面的時候,它會先到工程目錄(src)去看有沒有  , 如果沒有找到, 它還會在public公共目錄下去找.

5.  reducer 結束action處理state

 if (action.type === actionTypes.GET_LIST){
        return state.set('list', action.data);
    }
 

 6. 元件接收新的list, 然後在頁面上使用

const mapStateToProps = (state) => {
    return {
        focused: state.getIn(['header','focused']),
        list: state.getIn(['header','list'])
    }
}