Редакция саги take () возвращает неопределенное значение после выполнения действия - PullRequest
0 голосов
/ 25 сентября 2018

Таким образом, если говорить кратко, эффект редукса саги возвращает объект, для которого rpoperies не определены, кроме типа.Вот моя сага `

import axios from 'axios';

import {
  take, put, call
} from 'redux-saga/effects';

import {
  getEventInfo, GET_EVENT_INFO
} from '../actions';

export default function* eventInfoSaga() {
  try {
    const { token, query } = yield take(GET_EVENT_INFO);
    console.log(token, 'token'); // undefined
    console.log(query, 'query'); // undefined
    const options = {
      method: 'post',
      url: `https://www.eventbriteapi.com/v3/events/search/?q=${query}&expand=venue`,
      credentials: 'include',
      headers: { Authorization: `Bearer ${token}` }
    };
    const response = yield call(axios, options);
    console.log(response, 'response eventInfoSaga');
    yield put(getEventInfo(response));
  } catch (err) {
    console.log(err);
  }
}

Это makeActionCreator`

const makeActionCreator = (type, ...argNames) => (...args) => {
  const action = { type };
  argNames.forEach((arg, index) => {
    action[arg] = args[index];
  });
  console.log(action, 'actioooooooooooon');
  return action;
};

export default makeActionCreator;

, который я вызываю с этим`

import { makeActionCreator } from '../utilities';

export const GET_EVENT_INFO = 'GET_EVENT_INFO';
export const getEventInfo = makeActionCreator(GET_EVENT_INFO, 'token', 'query');

И это компонент, куда я отправляюдействие с параметрами `

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import SearchIcon from '../SvgIcons';
import MapComponent from '../Map';
import { getEventInfo, getUserInfo } from '../../actions';

class DashboardPage extends Component {
  componentDidMount() {
    const { dispatchUserInfo } = this.props;
    dispatchUserInfo();
  }

  handleEventSearch = (e) => {
    e.preventDefault();
    const { dispatchEventInfo } = this.props;
    const query = e.target.children[0].value;
    console.log(query, 'queryyyyyyyy'); 
    **dispatchEventInfo(query, query);**
  }

  render() {
    console.log(this.props, 'proooops');
    return (
      <div className="dashboard-container">
        <div className="search-event">
          <form className="search-event__form" onSubmit={this.handleEventSearch}>
            <input
              autoComplete="off"
              type="text"
              name="search-event"
              placeholder="Search an event"
              className="search-event__input"
              aria-label="Enter search text"
              onChange={this.handleInputChange}
            />
            <button type="submit" className="search-event__button">
              <SearchIcon />
              Search
            </button>
          </form>
          <p className="sign-out">
            <a href="/api/logout" className="btn btn--sign-out sign-out__button">Sign out</a>
          </p>
        </div>
        <div className="google-map">
          <MapComponent
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGCyELoQaEHdu5GWT5WPTYU-T811MA4SY&v=3.exp&libraries=geometry,drawing,places"
            loadingElement={<div style={{ height: '100%' }} />}
            containerElement={<div style={{ height: '100%' }} />}
            mapElement={<div style={{ height: '100%' }} />}
          />
        </div>
      </div>
    );
  }
}

DashboardPage.defaultProps = {
  dispatchUserInfo: null,
  dispatchEventInfo: null,
};

DashboardPage.propTypes = {
  dispatchUserInfo: PropTypes.func,
  dispatchEventInfo: PropTypes.func
};

const mapStateToProps = (state) => {
  const name = state.userReducer.name || '';
  const accessToken = state.userReducer.accessToken || '';
  return {
    name,
    accessToken
  };
};

const mapDispatchToProps = dispatch => ({
  dispatchEventInfo() {
    dispatch(getEventInfo());
  },
  dispatchUserInfo() {
    dispatch(getUserInfo());
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

В документации redux-saga говорится, что take (pattern) создает описание эффекта, которое инструктирует промежуточное программное обеспечение ожидать указанного действия в хранилище.Генератор приостанавливается до тех пор, пока не будет отправлено действие, соответствующее шаблону. Как я понимаю, yield заставит его ждать это конкретное действие, а затем что-то делать (запросить, изменить и т. Д.).Так почему я становлюсь неопределенным?Может быть, я что-то неправильно понимаю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...