为什么我的道具带回了动作功能，而不是日期？

Question

我有一个正在拉取一些数据的 React 应用程序，它变成了一个承诺，所以我正在使用 Thunk。但是，当我登录 this.props 时，getShift 操作作为函数打印出来。

日志returns： {getShifts: ƒ}getShifts: ƒ ()proto: Object

操作：

 import settings from '../../aws-config.js';
    import Amplify, { Auth, API } from 'aws-amplify';
    export const GET_STAFF_SHIFTS = 'get_staff_shifts';
    export const SHIFTS_LOAD_FAIL = 'shifts_load_fail';
    export const getShifts = () => dispatch => {
        console.log('Fetching list of shifts for user...');
        const request = API.get("StaffAPI", "/shifts", {
            headers: {
                   'Accept': 'application/json',
                   'Content-Type': 'application/json',
            }
        })
        .then(response =>

            dispatch({
              type: 'GET_STAFF_SHIFTS',
              payload: response
            })
        )
        .catch(err =>
            dispatch({type: 'SHIFTS_LOAD_FAIL'})
        )
        }

减速器：

    import { getShifts, GET_STAFF_SHIFTS} from '../actions';
    export default function(state = {}, action) {
      switch(action.type){
        case GET_STAFF_SHIFTS:
            return Object.assign({}, state,{
              start_time: action.payload
            })
            default:
            return state;
      }
    }

操作：

import React, { Component } from 'react';
import Amplify, { Auth, API } from 'aws-amplify';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getShifts} from '../actions/index';
import settings from '../../aws-config.js';
Amplify.configure(settings);

class StaffRota extends Component {
  componentWillMount() {
  this.props.getShifts();
  }
  renderPosts(){
    console.log(this.props);
  return (

    <div></div>
  );


    }
}

function MapDispatchToProps(dispatch) {
  return bindActionCreators({ getShifts }, dispatch);
}
export default connect(null, MapDispatchToProps)(StaffRota);

Answer 1

动作创建者应该是一个函数，这是预期的。所以控制台日志记录 this.props.getShifts 会给你一个功能。

这里有两个问题：

首先你派发了错误的动作类型 dispatch({type: 'GET_STAFF_SHIFTS', ... }) 而不是您在减速器中期望的 dispatch({type: GET_STAFF_SHIFTS, ... })。

其次，您应该通过 mapStateToProps 函数

使用 redux state

function MapDispatchToProps(dispatch) {
  return bindActionCreators({ getShifts }, dispatch);
}
function MapStateToProps(state) {
  return {
    shift: state.start_time OR state.your_reducer.start_time
  }
}

export default connect(MapStateToProps, MapDispatchToProps)(StaffRota);

并通过 this.props.shift.

使用此状态（映射到 prop）

为什么我的道具带回了动作功能，而不是日期？

Why is my props bringing back the action function, not the date?

javascript

reactjs

redux

redux-thunk