Почему мои реквизиты возвращают функцию действия, а не дату? - PullRequest
Новая
       10

Почему мои реквизиты возвращают функцию действия, а не дату?

0 голосов
/ 30 мая 2018

У меня есть приложение реагирования, которое собирает некоторые данные. Это обещает, поэтому я использую Thunk.Однако, когда я регистрирую this.props, действие getShift распечатывается как функция.

Журнал возвращает: {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);

1 Ответ

0 голосов
/ 30 мая 2018

Создатель действия должен быть ожидаемой функцией.Так что запись в консоль this.props.getShifts даст вам функцию.

Здесь есть две проблемы:

первое, что вы отправляете неправильный тип действия dispatch({type: 'GET_STAFF_SHIFTS', ... }) вместо dispatch({type: GET_STAFF_SHIFTS, ... }), которым вы являетесьожидая в вашем редукторе.

во-вторых, вы должны использовать редукс state через mapStateToProps функцию 

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.

...