如何在react js中使用dispatch获取异步数据

Question

我在react js视图记录.js 中编写了以下函数

fetchRecordingJson(file_name)
{
const { dispatch, history } = this.props;

if(dispatch)
{

dispatch(fetchrecordingJson(file_name));
history.push('/app/recording-analysis');

}

}

我想将来自使用函数fetchrecordingJson(file_name(的数据转移到另一个页面记录分析

查询是：如何在记录分析页面中查看来自函数fetchrecordingJson(file_name(的数据

我正在使用redux-thunk库进行异步调用，下面是我的reducer代码

case 'RECEIVE_JSON':
let newState = {data: action.data.data, info: action.data.info, count: state.count};
newState.annotations = action.data.annotations.length === 0 ? [[]] :  action.data.annotations || [[]];
newState.file_name = action.file_name;
return Object.assign({}, newState);

下面是我的action.js代码

export function receiveJSON(json, file_name) {
return {
type: RECEIVE_JSON,
file_name,
data: json
}
}
export  function fetchRecordingJson(file_name) {

return dispatch => {

return  axios.get(API_URL+`fetchjson/${file_name}`)
.then(json => {

dispatch(receiveJSON(json.data, file_name))



})

}
}

Answer 1

您可以使用redux的mapStateToProps属性来获取保存在redux存储中的数据。我已经创建了一个示例组件，在其中我们通过调用this.props.data来获得刚刚存储在componentDidMount的redux存储中的newState值。

import React, { Component } from 'react'
import { connect } from 'react-redux'
class TestOne extends Component {
componentDidMount = () => {
console.log(this.props.data)
}
render() {
return (
<>
</>
)
}
}
const mapStateToProps = state => {
return {
data: state.newState
}
}
export default connect( mapStateToProps )(TestOne)