javascript - mapStateToProps将数据传递到 Prop

我正在构建一个工作人员轮换系统，我有一个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返回undefined。

有什么帮助吗？

最佳答案

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())})(...)

关于javascript - mapStateToProps将数据传递到 Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50526504/