我redux-thunk用于创建异步操作，以便可以使用“提取”调用API方法。我已经将redux商店附加到我的根App组件中，如下所示：
import React, { Component } from 'react';
import {Provider} from 'react-redux';
import Grid from '../src/Components/Grid/Grid';
import rootReducer from './Reducer';
import './App.css';
import { createStore,applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';
class App extends Component {
render() {
return (
<Provider store={createStore(rootReducer,{},applyMiddleware(ReduxThunk))}>
<div className="App">
<Grid></Grid>
</div>
</Provider>
);
}
}
export default App;
我已经定义了我的异步动作创建者，如下所示：
import config from 'react-global-configuration';
import fetch from 'cross-fetch';
export default function textChangeActionCreator(data){
console.log('in action createor'+data)
return async function(dispatch){
console.log('fetching....')
return await fetch(data).
then((data)=>{
console.log(data);
dispatch({type:'text_change',payload:data})
}).
catch((err)=>{console.log(err)})
}
}
我的问题是，当我从任何组件调用上述动作创建者时，它都会被正确调用，但第二个console.log('fetching....')未显示，并且fetch()调用似乎没有发生。
我究竟做错了什么？
这是调用动作创建者的组件代码：
class Grid extends React.PureComponent{
constructor(props)
{
super(props);
this.state={dynamicButtonText:'',seachText:''}
this.updateDynamicText=this.updateDynamicText.bind(this);
this.onTextChanged=this.onTextChanged.bind(this);
this.updateSearchText=this.updateSearchText.bind(this);
}
onTextChanged()
{
textChangeActionCreator(searchURL);
}
render()
{....}
}
const mapStateToProps=(state)=>{return state;}
export default connect(mapStateToProps,{textChangeActionCreator})(Grid);
这通常是由错误的操作调用引起的。确保您既要调用textChangeActionCreator()动作创建者，又要将结果传递到要传递给dispatch()的propsToDispatch对象中connect()：
export default connect(mapStateToProps, dispatch => {
/* Call textChangeActionCreator() and pass the result to dispatch() */
return {
textChange : (data) => dispatch(textChangeActionCreator(data))
}
})(YourComponent);
只是查看您的代码，似乎您是onTextChanged()直接从中调用动作创建者。您需要通过组件props这样调用它：
onTextChanged()
{
this.props.textChangeActionCreator(searchURL);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句