Redux Action 重用

Question

我是 React/Redux 的初学者。

我已经完成了一个基本组件<HeatMap />在我的应用程序中，其操作/ reducer /商店运行良好。

我将渲染另一个 <HeatMap />具有不同的设置( Prop )。

我想做的是分离这两个组件，因为当我 dispatch更新action其中一个，另一个同时执行。

问题 1

我尝试用这个来区分商店中的状态

import heatMap from './heat-map1'
import {combineReducers} from 'redux';

export let reducers = combineReducers({
    heatMap1: heatMap,
    heatMap2: heatMap
});

结合Reducers和connect商店中不同对象的 2 个热图

export default connect((state)=> {
    return {
        onState: state.heatMap1.onState,
        config: state.heatMap1.config
    }
})(CHMSHeatMap1)

和

export default connect((state)=> {
    return {
        onState: state.heatMap2.onState,
        config: state.heatMap2.config
    }
})(CHMSHeatMap2)

这是正确的吗？

问题 2

因为当操作被调度时，2个组件都会使用react

我正在考虑分离共享操作，但我认为这不是一个好主意。或者也许问题不在这里。

您能告诉我这个问题的原因以及如何解决吗？

这是我的 reducer

import * as actionTypes from '../actions/heat-map';
import Immutable from 'immutable';


const onState = {
    fetching: 'FETCHING',
    error: 'ERROR',
    drawn: 'DRAWN'
};

const initialState = {
    onState: onState.fetching,
    config: {}
};


export default function heatMapReducer(state = initialState, action) {
    let immutableState = Immutable.fromJS(state);
    switch (action.type) {
        case actionTypes.INITIALIZING:
            return immutableState.set('onState', onState.drawn).set('config', action.payload.initConfig).toJS();
        case actionTypes.FETCH_DATA_REQUEST:
            return immutableState.set('onState', onState.fetching).toJS();
        case actionTypes.FETCH_DATA_SUCCESS:
            return immutableState.set('onState', onState.drawn).setIn(['config','series',0,'data'],Immutable.fromJS(action.payload.mapData.data)).toJS();
        case actionTypes.FETCH_DATA_FAILURE:
            return immutableState.set('onState', onState.error).set('config', action.payload.mapData).toJS();
        default:
            return state;
    }
}

操作很简单

export function initializeConfig(initConfig) {
    return {
        type: INITIALIZING,
        payload: {
            text: 'Initializing',
            initConfig
        }
    }
}

export function requireMapData() {
    return {
        type: FETCH_DATA_REQUEST,
        payload: {
            text: 'Loading'
        }
    };
}
..........

//Async Action for fetching map data and redraw the map
export function fetchMapData(address) {
    return function (dispatch) {
        //dispatch requireMapData action to set the map in loading state
        dispatch(requireMapData());
        return fetch(address)
            .then(fetchUtil.checkHttpStatus) //check if 404
            .then(fetchUtil.parseJSON)
            .then(mapData => dispatch(fetchDataSucceed(mapData)))
            .catch(error => dispatch(fetchDataFailed(error)));
    }
}

谢谢你，我的 friend 。

Answer 1

您无法按照您所描述的方式复制您的 reducer 。两者都会以完全相同的方式响应完全相同的操作。

解决方案是让所有热图数据处于相同的 reducer 状态。例如

const initialState = {
    heatMap1: {},
    heatMap2: {}
};

export default heatmap(state = initialState, action) {
   // etc

现在，如果您想对两个热图使用相同的操作，则需要有一个操作属性来指定您要定位的堆图。如果您有多个热图，我建议您使用一组热图，其中每个操作都包含一个 index 或 id 来定位特定的热图。例如

function updateHeatMap(index, value) {
    return {
        type: UPDATE_HEATMAP,
        index: index,
        value: value
    }
}