[英]React - Redux wait fetch result before render component
I have some react-redux project.我有一些 react-redux 项目。 I have some component which i wan't to list some data from api.
我有一些组件,我不想从 api 列出一些数据。 simply i dispatch action from my component inside of componentDidMount method, which fetch data.
只是我在componentDidMount方法中从我的组件分派动作,该方法获取数据。
When i refresh page i make console.log my redux state.当我刷新页面时,我将 console.log 设为我的 redux 状态。
Component rendering well but when i look at the console there is my console.log show my state empty then show my state normally.. In this progress time my component give me error that my data which i wan't to show on page is undefined.组件渲染良好,但是当我查看控制台时,我的 console.log 显示我的状态为空,然后正常显示我的状态.. 在这个过程中,我的组件给我错误,我不想在页面上显示的数据未定义.
So here is because fetch method working async how i understand, but what need to do for when my redux state will get data from api then component will be rendered?所以这是因为我理解的 fetch 方法异步工作,但是当我的 redux 状态将从 api 获取数据然后组件将被呈现时需要做什么?
here is my action:这是我的行动:
export const FETCH_DATA_START = 'FETCH_DATA_START'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'
export const getData = () => {
return (dispatch) => {
dispatch({
type: FETCH_DATA_START
})
fetch("http://api.com", {
credentials: "include",
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then((res) => {
dispatch({
type: FETCH_DATA_SUCCESS,
payload: res
})
})
.catch((err) => {
console.log(err)
dispatch({
type: FETCH_DATA_FAILED,
payload: 'error'
})
})
}
}
here is my reducer:这是我的减速器:
import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_FAILED } from 'store/actions/getData'
let initialState = []
export default (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_START:
return [...state]
case FETCH_DATA_SUCCESS:
return [...state, ...action.payload]
case FETCH_DATA_FAILED:
return [state]
default:
return state
}
}
in my component:在我的组件中:
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {getData} from 'store/actions/getData'
class Ops extends Component {
componentDidMount() {
this.props.getData()
}
render() {
console.log(this.props.dataOps)
return(
<div></div>
)
}
}
const mapStateToProps = state => ({dataOps: state.dataOps})
function mapDispatchToProps(dispatch) {
return {
getData: bindActionCreators(getData, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Ops)
Option 1 选项1
check the reducer state before use 使用前检查减速机状态
Option 2 选项2
async componentDidMount(){
//set loader true
await this.props.getData;
//set loader false
}
You could implement a 'loading' state 您可以实现“加载”状态
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {getData} from 'store/actions/getData'
class Ops extends Component {
state = {
isLoading: true
}
componentDidMount() {
this.props.getData().then(res => res.json())
.then((res) => {
// Toggle state after promise completed
this.setState({
isLoading: false
})
// Dispatch data
dispatch({
type: FETCH_DATA_SUCCESS,
payload: res
})
})
.catch((err) => {
console.log(err)
dispatch({
type: FETCH_DATA_FAILED,
payload: 'error'
})
})
}
}
render() {
// If we're still loading data, show loading component
if (this.state.isLoading) {
return (<div>Loading...</div>);
}
console.log(this.props.dataOps)
// Render with data
return(
<div>Loading completed!</div>
)
}
}
const mapStateToProps = state => ({dataOps: state.dataOps})
function mapDispatchToProps(dispatch) {
return {
getData: bindActionCreators(getData, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Ops)
edit; 编辑; return the promise instead of the resolved data;
返回承诺而不是已解决的数据; (Not sure about syntax)
(不确定语法)
export const getData = () => {
return (dispatch) => {
dispatch({
type: FETCH_DATA_START
});
return fetch("http://api.com", {
credentials: "include",
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.