Question

当我向减速器发送动作时，其他减速器会受到影响，其状态也会改变

mapStateToProps和mapDispatchToProps函数：

    const mapStateToProps = state => {
      return { modalVisible: state.assignSchema.modalVisible };
    };
    const mapDispatchToProps = dispatch => {
      return {
        onModalShow: data => {
          dispatch({
            type: 'SHOW',
            payload: data,
          });
        },
        onModalHide: () => {
          dispatch({ type: 'HIDE' });
        },
      };
    };

    export default connect(mapStateToProps, mapDispatchToProps)(AssignToSchema);

减速器：

function assignSchemaReducer(state, action) {
  state = {
    modalVisible: 'Initial',
    selectedDomId: undefined,
  };
  switch (action.type) {
    case 'SHOW':
      switch (action.payload.type) {
        case 'link':
          return {
            ...state,
            modalVisible: 'SHOW',
            // selectedTarget: action.key.anchorTagId,
            // textTagId: action.key.textTagId,
            // schemaId: action.key.current_schema_id,
          };
        case 'node':
          return {
            ...state,
            modalVisible: 'SHOW',
            selectedDomElementId: action.key.ElementId,
          };
        case 'sc':
          return {
            ...state,
            modalVisible: 'SHOW',
            selectedDomElementId: action.key.ElementId,
          };
      }

    case 'HIDE':
      return {
        ...state,
        modalVisible: 'HIDE',
        selectedDomId: null,
      };
    default:
      return state;
  }
}

export default assignSchemaReducer;

将SHOW动作分发给assignSchemaReducer的其他减速器后，它们会受到影响，并且其状态也发生了变化。我也使用联合减速机来处理多个减速机

[UPDATE]其他减速器 schemaFormReducer：

function schemaFormReducer(state, action) {
  state = {
    modalVisible: 'Initial',
    actionType: null,
  };
  switch (action.type) {
    case 'SHOW':
      return {
        ...state,
        modalVisible: 'SHOW',
        actionType: action.type,
      };
    case 'HIDE':
      return {
        ...state,
        modalVisible: 'HIDE',
        actionType: null,
      };
    default:
      return state;
  }
}

export default schemaFormReducer;

treeSelectReducer：

const treeSelectReducer = (state, action) => {
  state = {
    modalVisible: 'Initial',
    selectedSchemaId: undefined,
  };
  switch (action.type) {
    case 'SET_SCHEMA_ID': {
      return {
        ...state,
        selectedSchemaId: action.payload,
      };
    }
    case 'UNSET_SCHEMA_ID': {
      return {
        ...state,
        selectedSchemaId: null,
      };
    }

    default:
      return state;
  }
};

export default treeSelectReducer;

减少历史记录：

function historyReducer(state, action) {
  state = {
    modalVisible: "Initial",
    selectedNodeId: null,
    tagCode: null
  };
  switch (action.type) {
    case "SHOW":
      return {
        ...state,
        modalVisible: "SHOW",
        selectedNodeId: action.key,
        unitMeasureSymbol: action.unitMeasureSymbol,
        tagCode: action.tagCode
      };
    case "HIDE":
      return {
        ...state,
        modalVisible: "HIDE",
        selectedNodeId: null
      };
    default:
      return state;
  }
}

export default historyReducer;

谢谢...

Answer 1

尝试将操作导出到函数（可能是另一个名为actions.js的文件）。

例如：

// action.js file
const hideAction = (data) => {
     return {
        type: 'SHOW',
        payload: data,
      }
};

// reducer.js file
import {hideAction} from './action.js';
const mapDispatchToProps = {
  hideAction
};

// tagetFile.js
   render(){
     const {hideAction} = this.props;
     const data = {a:1, b:2};
     hideAction(data);
   }

在react-redux中分派动作后用null更新我的状态

1 个答案: