Redux 重复操作重用

我是react/redux的初学者

我已经在我的应用程序中完成了一个基本组件

，它的操作/reducer/store很好地工作

我将用不同的设置（道具）渲染另一个

我要做的是分离这两个组件，因为当我在其中一个组件中执行更新操作时，另一个组件同时执行更新操作

问题1 我试着把商店里的州分开

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

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

组合传感器和

连接

存储中不同对象中的2个热图

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

及

这是正确的吗

问题2 因为两个组件在调度操作时都会做出反应

我正在考虑将共享的行为分开，但我认为这不是一个好主意。或者问题不在这里

那么你能告诉我是什么导致这个问题以及如何解决它吗

这是我的减速机

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)));
    }
}

---

谢谢你，我的朋友。

你不能像你描述的那样复制你的减速器。两者都将以完全相同的方式对完全相同的行为作出反应

解决方案是让所有热图数据处于相同的还原器状态。e、 g

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

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

现在，如果要对两个热映射使用相同的操作，则需要有一个操作属性来指定要针对的堆映射。如果您有多个热图，我建议使用一组热图，每个动作都包含一个

索引

或

id

，以特定热图为目标。e、 g

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

---

您还可以查看

multireducer

模块（）。它的设计目的正是为了解决您提出的方案

因此，您可以将存储配置为：

从“multireducer”导入multireducer；
从“./heat-map1”导入热图
从'redux'导入{combinereducer}；
导出let减速器=组合减速器({
多减速器：多减速器({
热图1：热图，
热图2：热图
})
});

之后，您需要使用

connectMultireducer（）

而不是redux的标准

connect（）

，以便将存储的特定部分连接到特定组件，如：

导出默认connectMultireducer（（状态）=>{
返回{
onState:state.heatMap.onState，
配置：state.heatMap.config
}
})（CHMSHeatMap）

最后，为了将状态的正确部分传递给这些组件中的每一个组件，您将在渲染它们时传入键：

---

显然，在回购协议中阅读实际的文件更好，但这应该给出一个简要的概述。基本上，该模块只是对通过

multireducer

函数创建的每个reducer添加基于键的查找的过程进行了抽象。

我提出了multireducer在没有任何库的情况下工作的原始概念。 基本思想是独特的

Symbol

动作类型和独立的Redux模块，如下所示：

将*作为服务从“/../../../../api/services”导入；
常量初始状态={
名单：[]，
};
函数getListReducer（状态、操作）{
返回{
……国家，
列表：action.payload.list，
};
}
函数removeItemReducer（状态、操作）{
const{payload}=动作；
const list=state.list.filter（（项，i）=>i！==payload.index）；
返回{
……国家，
列表
};
}
导出默认类列表{
构造函数（）{
//动作类型常数
this.GET_LIST=Symbol（'GET_LIST'）；
this.REMOVE_ITEM=符号（“REMOVE_ITEM”）；
}
getList=（serviceName）=>{
返回异步（调度）=>{
const list=等待服务[serviceName].get（）；
派遣({
类型：this.GET_列表，
有效载荷：{
列表
serviceName，
},
});
};
}
removeItem=（索引）=>{
返回（发送）=>{
派遣({
类型：this.REMOVE_项，
有效载荷：{
指数
},
});
};
}
减速器=（状态=初始状态，动作）=>{
开关（动作类型）{
此案例。获取列表：
返回getListReducer（状态、动作）；
此案例。删除项目：
返回removeItemReducer（状态、动作）；
违约：
返回状态；
}
}
}

阅读更多信息

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