redux-thunk 调度不起作用
redux-thunk dispatch does not work
我对 thunk 和异步调度有疑问。所以这是我的代码:
function fetchProvider() {
return (dispatch) => {
graphqlService(fetchProviderQuery)
.then((result) => {
dispatch({
type: FETCH_PROVIDER,
data: result.data.data.CurrentProvider,
});
});
};
}
class Dashboard extends React.Component {
componentDidMount() {
this.props.fetchProvider();
}
render() {
const { provider } = this.props;
return (
<div>
<ul>
<li>id: {provider.id}</li>
<li>name: {provider.name}</li>
<li>description: {provider.description}</li>
</ul>
</div>
);
}
}
const mapStateToProps = (state) => ({
provider: state.provider,
});
const mapDispatchToProps = (dispatch) => ({
fetchProvider: () => dispatch(fetchProvider()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
我不知道为什么,但是在 fetchProvider 操作创建者内部调度不起作用。 graphqlService 运行良好,在调度 FETCH_PROVIDER 时,传递给调度的操作数据是正确的,但随后出现问题,reducer 不会调用此操作。什么可能导致此问题?
您的 thunk
也必须 return 承诺,否则它将无法按预期工作。
只需稍微修改您的 fetchProvider
函数
function fetchProvider() {
return (dispatch) => {
return graphqlService(fetchProviderQuery)
.then((result) => {
dispatch({
type: FETCH_PROVIDER,
data: result.data.data.CurrentProvider,
});
});
};
}
终于找到问题了。这是由于 react-router-redux 中间件初始化不正确造成的。我将中间件构造函数传递给 applyMiddleware 而不是构造中间件。
我对 thunk 和异步调度有疑问。所以这是我的代码:
function fetchProvider() {
return (dispatch) => {
graphqlService(fetchProviderQuery)
.then((result) => {
dispatch({
type: FETCH_PROVIDER,
data: result.data.data.CurrentProvider,
});
});
};
}
class Dashboard extends React.Component {
componentDidMount() {
this.props.fetchProvider();
}
render() {
const { provider } = this.props;
return (
<div>
<ul>
<li>id: {provider.id}</li>
<li>name: {provider.name}</li>
<li>description: {provider.description}</li>
</ul>
</div>
);
}
}
const mapStateToProps = (state) => ({
provider: state.provider,
});
const mapDispatchToProps = (dispatch) => ({
fetchProvider: () => dispatch(fetchProvider()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
我不知道为什么,但是在 fetchProvider 操作创建者内部调度不起作用。 graphqlService 运行良好,在调度 FETCH_PROVIDER 时,传递给调度的操作数据是正确的,但随后出现问题,reducer 不会调用此操作。什么可能导致此问题?
您的 thunk
也必须 return 承诺,否则它将无法按预期工作。
只需稍微修改您的 fetchProvider
函数
function fetchProvider() {
return (dispatch) => {
return graphqlService(fetchProviderQuery)
.then((result) => {
dispatch({
type: FETCH_PROVIDER,
data: result.data.data.CurrentProvider,
});
});
};
}
终于找到问题了。这是由于 react-router-redux 中间件初始化不正确造成的。我将中间件构造函数传递给 applyMiddleware 而不是构造中间件。