Question

简而言之，redux saga的生效将返回除type之外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）创建一个Effect描述，该结果指示中间件等待Store上的指定操作。生成器将暂停，直到调度出与模式匹配的操作为止。据我了解， yield 将使其等待该特定操作，然后执行某些操作（请求，更改等）。那么，为什么我变得不确定？可能是我误会了一些东西

两次操作后，redux saga take（）返回未定义

0 个答案: