Таким образом, если говорить кратко, эффект редукса саги возвращает объект, для которого 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 заставит его ждать это конкретное действие, а затем что-то делать (запросить, изменить и т. Д.).Так почему я становлюсь неопределенным?Может быть, я что-то неправильно понимаю