如何使用 Redux Promise 为我的组件获得已解决的承诺?
Posted
技术标签:
【中文标题】如何使用 Redux Promise 为我的组件获得已解决的承诺?【英文标题】:How to get a resolved promise to my component with Redux Promise? 【发布时间】:2016-10-04 22:19:09 【问题描述】:我正在我的操作中发出请求 - 从需要将一些数据加载到我的组件中的 API 中提取。我让它在组件挂载时启动该请求,但我似乎无法让 Redux-Promise 正常工作,因为它只是不断返回:
Promise [[PromiseStatus]]: "pending", [[PromiseValue]]: undefined
当我尝试在我的开发工具中控制台记录我的 componentWillMount 方法中的值时。
下面是我的代码:
存储和路由器
import React from 'react';
import render from 'react-dom';
import createStore, applyMiddleware from 'redux';
import promiseMiddleware from 'redux-promise';
import Provider from 'react-redux';
import Router, hashHistory from 'react-router';
import routes from './routes';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(promiseMiddleware)
);
render(
<Provider store=store>
<Router history=hashHistory routes=routes />
</Provider>,
document.getElementById('root')
);
动作
import axios from 'axios';
export const FETCH_REVIEWS = 'FETCH_REVIEWS';
export const REQUEST_URL = 'http://www.example.com/api';
export function fetchReviews()
const request = axios.get(REQUEST_URL);
return
type: FETCH_REVIEWS,
payload: request
;
;
评论缩减器
import FETCH_REVIEWS from '../actions/reviewActions';
const INITIAL_STATE =
all: []
;
export default function reviewsReducer(state = INITIAL_STATE, action)
switch(action.type)
case FETCH_REVIEWS:
return
...state,
all: action.payload.data
default:
return state;
Root Reducer
import combineReducers from 'redux';
import reviewsReducer from './reviewsReducer';
const rootReducer = combineReducers(
reviews: reviewsReducer
);
export default rootReducer;
组件
import React, Component from 'react';
import connect from 'react-redux';
import fetchReviews from '../../actions/reviewActions';
class Home extends Component
componentWillMount()
console.log(this.props.fetchReviews());
render()
return (
<div>List of Reviews will appear below:</div>
);
export default connect(null, fetchReviews )(Home);
非常感谢任何和所有帮助。谢谢你。
【问题讨论】:
【参考方案1】:Redux-promise 返回一个正确的 Promise 对象,因此您可以稍微更改代码以避免立即执行。
class Home extends Component
componentWillMount()
this.props.fetchReviews().then((whatever) => console.log('resolved'))
// ...
【讨论】:
谢谢 - 是的,这很有帮助。正如您所指出的,Console.logging 立即执行它,它会在运行后立即执行,因此是未决承诺的原因。我在发布此内容后安装了 redux-logger,并且能够看到 promise 在它到达我的商店时解决。以上是关于如何使用 Redux Promise 为我的组件获得已解决的承诺?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 redux 和 redux-promise 将多个 axios 调用合并到一个有效负载中?
使用 redux-thunk 从 React Native 中的动作创建者返回 Promise
在 react-redux-promise 应用程序中解析 XML
使用 redux-promise 继续获得未定义的 'dispatch'