0
私はreact/reduxを使ってアプリケーションを作成します。はReduxのbindActionCreatorsの後に約束を得ることができません
私は非同期要求を行うためのカスタムアクションクリエイターを持っています(私はredux-thunkを使用します)。私のコンポーネントで
export function loginAttempt(userData) {
return dispatch => {
let formData = new FormData();
formData.append('username', userData.username);
formData.append('password', userData.password);
fetch('https://api.t411.ch/auth', {
method: 'POST',
body: formData
}).then(response => {
if (response.status !== 200) {
const error = new Error(response.statusText);
error.respone = response;
dispatch(loginError(error));
throw error;
}
return response.json();
}).then(data => {
dispatch(loginSuccess(data));
});
}
、私は派遣でこのメソッドをバインドするbindActionCreatorsを使用します。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import SearchBar from './SearchBar';
import TorrentLayout from './TorrentLayout';
import * as LoginActions from '../actions/login'; // <---- it's where the code above is located
import * as SearchActions from '../actions/search';
function mapStateToProps(state) {
return {
login: state.login,
searching: state.searching
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({...LoginActions, ...SearchActions}, dispatch);
}
@connect(mapStateToProps, mapDispatchToProps)
export default class Home extends Component {
constructor(props) {
super(props);
console.log('should be a promise');
let foobar = this.props.loginAttempt({username: 'username', password:'password'});
console.log(foobar); // <------ undefined
// that I want to do
this.props.loginAttempt({username: 'username', password:'password'}).then(() => {
this.props.search(this.props.login.token, "mysearch");
}
}
render() {
return (
<div>
<div>
<SearchBar {...this.props} />
<TorrentLayout {...this.props}/>
</div>
</div>
);
}
}
私はすでに派遣にバインドされた私の行動の作成者に「し、」適用したいと思います。あなたはloginAttempt
の内側にあなたの矢印関数内return fetch()
に必要
おかげ