reactjs - 在 React Redux 中联合调用多个操作

Question

我正在学习 React Redux。我的动作如下

import Axios from 'axios';

export const getAddress = valueModal => dispatch => {
  return Axios.get('/api/address')
    .then(response => {
      var addressData = response.data;
      dispatch({
        type: 'getAddresses',
        payload: { addressData, valueModal }
      });
    })
    .catch(function(error) {
      console.log(error);
    });
};

export const uploadImage = (formData, id, config) => dispatch => {
  return Axios.post('/api/address/upload', formData, config)
    .then(response => {
      dispatch({
        type: 'uploadImage',
        payload: response.data
      });
    })
    .catch(function(error) {
      console.log(error);
    });
};

export default { getAddress, addAddress, uploadImage };

我的减速机如下

const initialState = {
    address: {}
};

const addressReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'getAddresses': {
            return {
              controlModal: action.payload.valueModal,
              address: action.payload.addressData
            };
        }
        case 'uploadImage': {
            return {
                uploadImage: action.payload
            };
        }
        default:
            return state;
    }
};

export default addressReducer;

我想打电话getAddresses和uploadImage联名。我怎样才能做到这一点 ？

Answer 1

const initialState = {
    address: {}
};

const addressReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'getAddresses': {
            return {
              ...state,
              controlModal: action.payload.valueModal,
              address: action.payload.addressData
            };
        }
        case 'uploadImage': {
            return {
                ...state,
                uploadImage: action.payload
            };
        }
        default:
            return state;
    }
};

export default addressReducer;

您需要分散对象状态，否则在更新之前永远不会引用状态。

对象扩展语法允许您使用扩展...运算符以更简洁的方式将可枚举属性从一个对象复制到另一个对象。