Вызовите несколько действий совместно в React Redux - PullRequest
Новая
       53

Вызовите несколько действий совместно в React Redux

0 голосов
/ 03 апреля 2019

Я изучаю 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 совместно. Как я могу это сделать?

enter image description here

1 Ответ

2 голосов
/ 03 апреля 2019 
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;

Вам необходимо распространить состояние объекта, иначе перед обновлением никогда не будет ссылки на состояние.

Синтаксис распространения объекта позволяет использовать оператор распространения ... для более краткого копирования перечислимых свойств из одного объекта в другой.

...