Redux：未调用异步动作创建者答案

【问题标题】：Redux: Asynchronous action creator not being calledRedux：未调用异步动作创建者
【发布时间】：2019-04-04 05:08:01
【问题描述】：

我正在使用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);

【问题讨论】：

你在中间件中添加了redux-thunk吗？
是的...更新了问题
caniuse.com/#feat=fetch 会有帮助吗？

标签： javascript reactjs react-redux redux-thunk

【解决方案1】：

这通常是由不正确的操作调用引起的。确保你们都在调用textChangeActionCreator() 动作创建者，并将结果传递给propsToDispatch 对象中的dispatch()，然后传递给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);
}

【讨论】：

我已经在组件中使用了 connect...请参阅更新后的问题。
@ShibasisSengupta 刚刚更新了答案 - 这有帮助吗？

【解决方案2】：

试试这样的：

const textChangeActionCreator = (data) => {
  console.log(`in action createor ${data}`);

  return (dispatch) => {
    console.log('fetching...');
    return fetch(data)
      .then((data)=>{ 
        console.log(data);
        dispatch({ type:'text_change', payload:data });
      })
      .catch((err)=>{ console.log(err); });
  };
};

你不需要等待或异步，因为你正在返回一个承诺，你应该等待你调用这个函数的地方。

另外，你在这里使用柯里化，所以你必须调用类似的东西： const fetchedData = await textChangeActionCreator(data)(dispatch);

【讨论】：