combineReducers 对数据进行拆分管以及使用immutable.js

阳光穿透心脏的1/2处 2022-01-12 13:25 94阅读 0赞

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';

![693756-20190317201948953-1425442865.jpg][]

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10548495.html

[693756-20190317201948953-1425442865.jpg]: /images/20220109/9665c670f85940ea8572a1440a298958.png