mapStateToProps для передачи данных в реквизит

Question

Я строю систему ротации персонала, у меня есть функция mapStateToProps, но rotaData для реквизита возвращается как неопределенное Это мое действие:

import settings from '../../aws-config.js';
import Amplify, { Auth, API } from 'aws-amplify';
export const GET_STAFF_SHIFTS = 'get_staff_shifts';
export function getShifts() {
console.log('Fetching list of shifts for user...');

const request = API.get("StaffAPI", "/shifts", {
headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
   }
});
return {
  type : GET_STAFF_SHIFTS,
  payload : request
 }
}

это мой редуктор

import _ from "lodash"
import { GET_STAFF_SHIFTS} from '../actions';

export default function(state = {}, action) {
switch(action.type){
case GET_STAFF_SHIFTS:
    return { ...state, rotaData: action.payload.data };
 }
}

это моя функция mapStateToProps

function mapStateToProps(state){
return{ rotaData: state.rotaData };
}
export default connect(mapStateToProps, {getShifts: getShifts}) 
(StaffRota);

Однако в моем классе StaffRota, когда консоль регистрирует this.props, rotaData возвращает неопределенное значение.

Может ли помочь с этим?

Answer 1

API.get () является не синхронным, вместо этого он возвращает Promise, поэтому вам нужно дождаться его завершения, а затем отправить другое действие после завершения загрузки.Вам нужно установить redux-thunk, чтобы иметь возможность отправлять функцию.

export const getShifts = () => dispatch => {
    const request = API.get("StaffAPI", "/shifts", {
        headers: {
               'Accept': 'application/json',
               'Content-Type': 'application/json',
        }
    })
    .then(response => 
        dispatch({type: 'SHIFTS_LOAD_SUCCESS', response})
    )
    .catch(err => 
        dispatch({type: 'SHIFTS_LOAD_FAIL'})
    )
}

Затем вы можете обработать SHIFTS_LOAD_SUCCESS в вашем редукторе, который будет содержать ответ.Затем в вашем mapDispatchToProps вы можете предоставить функцию getShifts для вашего компонента в качестве реквизита:

export default connect(mapStateToProps, dispatch => {loadAllShifts: dispatch(getShifts())})(...)

Answer 2

API.get возвращает Обещание , поэтому вместо него необходимо использовать разрешенный результат.

Вам также понадобится использовать библиотеку, например redux-thunk , чтобыотложить отправку действия до разрешения API.

const getShifts = () => dispatch =>
  API.get(...).then(response => dispatch({
    type: GET_STAFF_SHIFTS,
    payload: response,
  }))