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

我的 Reducer 如下所示

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;

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

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

在 React Redux 中联合调用多个动作

Call multiple actions jointly in React Redux

reactjs

redux

react-redux

redux-actions