Javascript mapStateToProps将数据传递给props

我正在建立一个员工轮转系统，我有一个mapStateToProps功能，但是props 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 };
 }
}

这是我的MapStateTops函数

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

然而，在我的StaffRota类中，当控制台记录this.props时，rotaData返回未定义

---

对此有什么帮助吗？

API.get

返回一个，因此您需要使用解析结果

您还需要使用一个库来延迟动作的分派，直到API解析为止

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

不是同步的，而是返回一个承诺，因此您需要等待它完成，然后在加载完成时发送另一个操作。您需要安装

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'})
    )
}

然后，您可以在包含响应的减速器中处理

shift\u LOAD\u SUCCESS

。然后在

mapDispatchToProps

中，您可以向组件提供

GetShift

功能作为道具：

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

---

感谢您的帮助，但是我收到一个错误，声明操作必须是普通对象。对异步操作使用自定义中间件。是的，您需要安装才能分派异步操作（链接上有关于如何将其添加为您的中间件的说明），很抱歉，我不知道我要做什么？我已经安装了reduxthunk@SamuelGray1.改变你的

getShifts

，就像我在上面2条的答案一样。编写一个减速机，处理

移位\u加载\u成功

并将其写入状态3中的某个位置。编写

MapStateTops

以从状态4提取数据。编写一个

mapDispatchToProps

，将

GetShift

作为

LoadAllShift

道具提供给组件5。调用组件中的某个地方的

LoadAllShift

。然后，组件将使用数据作为道具重新渲染。