Redux: создатель асинхронных действий не вызывается - PullRequest
Новая
       5

Redux: создатель асинхронных действий не вызывается

1 голос
/ 04 апреля 2019

Я использую redux-thunk для создания асинхронного действия, чтобы я мог вызывать метод API с помощью 'fetch'.Я прикрепил свое 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);

Ответы [ 2 ]

2 голосов
/ 04 апреля 2019

Обычно это вызвано неправильным вызовом действия. Убедитесь, что вы одновременно вызываете 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);
}
0 голосов
/ 04 апреля 2019

Попробуйте что-то вроде этого: 

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

...