#javascript #reactjs #react-redux #redux-thunk
#javascript #reactjs #реагировать-redux #сокращение-thunk
Вопрос:
Я использую 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);
Комментарии:
1. вы добавили
redux-thunk
промежуточное программное обеспечение?2. Да … обновил вопрос
3. caniuse.com/#feat=fetch Поможет ли это?
Ответ №1:
Обычно это вызвано неправильным вызовом действия. Убедитесь, что вы одновременно вызываете создателя 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);
}
Комментарии:
1. Я уже использовал connect в компоненте … пожалуйста, посмотрите обновленный вопрос.
2. @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); });
};
};
Вам не нужны await или async, поскольку вы возвращаете обещание, вы должны ожидать, когда вы вызываете эту функцию.
Кроме того, здесь вы используете каррирование, поэтому вам нужно вызвать что-то вроде: const fetchedData = await textChangeActionCreator(данные)(отправка);