javascript - Redux:未调用异步动作创建者
问题描述
我正在使用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);
}
推荐阅读
- angular8 - Angular 8 部署到 Github 页面后出现奇怪的路由问题
- java - 如何在 Java 中应用不同的排序算法之前随机化输入数组?
- javascript - 如何从javascript中的列表中删除所有项目
- r - 如何在 R 中跨多个变量运行表函数并使用函数将结果编译到新数据集中?
- python - 使用 Beautifulsoup 抓取 HTML
- rust - 如何将 Rust 变体枚举转换为底层结构?
- android - 使用底部导航控制器切换片段而不丢失数据
- unity3d - 如何更改代码以使我的操纵杆仅使我的角色更改一次跳跃速度?
- flutter - Flutter Provider 在页面意图上重建小部件
- sql - PostgreSQL:将行输出为逗号分隔的字符串列表