combineReducers 對數據進行拆分管以及使用immutable.js

1 使用combineReaducers 整合reducers

import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '../common/header/store';
import { reducer as homeReducer } from '../pages/home/store';
import { reducer as detailReducer } from '../pages/detail/store';
import { reducer as loginReducer } from '../pages/login/store';

const reducer = combineReducers({
    header: headerReducer, //對應的state保存在 header下
    home: homeReducer,
    detail: detailReducer,
    login: loginReducer
});

export default reducer;

2. 在store文件夾下創建index文件，把該文件夾下的內容，所有用index文件發出去：

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';

export { reducer, actionCreators, constants };

3 對應的獲取數據也要多一層：

const mapStateToprops = (state)=>{
    return {
        focused: state.header.focused
    }
}

 

 

4. 使用immutable來改變state：先安裝immutable（用在reducer中）

    安裝redux-immutable，在最外層的reducer中，將其中的state也變爲immutable對象，

import { combineReducers } from 'redux-immutable';

import * as constants from './constants';
import { fromJS } from 'immutable'; //這裏引入immutable

const defaultState = fromJS({ //這裏用fromJs將js對象改成immutable對象
    focused: false,
    mouseIn: false,
    list: [],
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch(action.type) {
        case constants.SEARCH_FOCUS:
            return state.set('focused', true); //使用set改變數據，immutable對象的set方法，會結合以前immutable對象的值和設置的值，返回一個全新的對象
        case constants.SEARCH_BLUR:
            return state.set('focused', false);
        case constants.CHANGE_LIST:
            return state.merge({ //改變多個數據
                list: action.data,
                totalPage: action.totalPage
            });
        case constants.MOUSE_ENTER:
            return state.set('mouseIn', true);
        case constants.MOUSE_LEAVE:
            return state.set('mouseIn', false);
        case constants.CHANGE_PAGE:
            return state.set('page', action.page);
        default:
            return state;
    }
}

 

獲取單個immutable對象：（當沒有引入redux-immutable的時候 state是從最外層的reducer而來，仍是普通的js對象）

const mapStateToprops = (state)=>{
    return {
        focused: state.header.get('focused')
    }
}

 

在組件中須要把immutable對象再改變回正常的js對象：（這種方法是引入看redux-immutable，而後在最外層的reducer中把state改爲來 immutable對象，因此state能夠使用getIn函數了，獲取header的reducer下的focused）

 

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

 5 使用axios異步獲取數據，放在 actioncreater中：

 

import * as constants from './constants';
import { fromJS } from 'immutable';
import axios from 'axios';

const changeList = (data) => ({
    type: constants.CHANGE_LIST,
    data: fromJS(data),
    totalPage: Math.ceil(data.length / 10)
});

export const getList = () => {
    return (dispatch) => {
        axios.get('/api/headerList.json').then((res) => {
            const data = res.data;
            dispatch(changeList(data.data)); //dispatch 使用了本文件中的函數，該函數再也不對外
        }).catch(() => {
            console.log('error');
        })
    }
};

 則前面組件調用方式爲：

dispatch(actionCreators.getList());

由於有多個reducer 則對應的多個actionCreators，每一個小store中 使用index 提供對外接口：
import { actionCreators } from './store';