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

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

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