Redux: Asynchronous action creator not being called

Question

I am using redux-thunk to create an asynchronous action so that I can call an API method using 'fetch'. I have attached my redux store to my root App component like this:

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;

I have defined my asynchronous action creator as shown here:

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)})
        }
}

My problem is, when I call the above action creator from any component it gets called properly however, the second console.log('fetching....') is not showing up and the fetch() call seems to not be happening.

What am I doing wrong?

Update

Here is the component code which is calling the action creator:

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);

Answer 1

This is usually caused by incorrect action invocation. Make sure that you're you're both calling the textChangeActionCreator() action creator, and passing the result to dispatch() in the propsToDispatch object that you pass to connect():

export default connect(mapStateToProps, dispatch => {

    /* Call textChangeActionCreator() and pass the result to dispatch() */
    return {
         textChange : (data) => dispatch(textChangeActionCreator(data))
    }
})(YourComponent);

Update

Just reviewing your code, it seems you're calling the action creator from onTextChanged() directly. You need to call it via the component's props like so:

onTextChanged()
{
    this.props.textChangeActionCreator(searchURL);
}