React - Redux 在渲染組件之前等待獲取結果

Question

我有一些 react-redux 項目。 我有一些組件，我不想從 api 列出一些數據。 只是我在componentDidMount方法中從我的組件分派動作，該方法獲取數據。

當我刷新頁面時，我將 console.log 設為我的 redux 狀態。

組件渲染良好，但是當我查看控制台時，我的 console.log 顯示我的狀態為空，然后正常顯示我的狀態.. 在這個過程中，我的組件給我錯誤，我不想在頁面上顯示的數據未定義.

所以這是因為我理解的 fetch 方法異步工作，但是當我的 redux 狀態將從 api 獲取數據然后組件將被呈現時需要做什么？

這是我的行動：

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'
                })
            })
    }
}

這是我的減速器：

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
    }
}

在我的組件中：

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)

Answer 1

選項1

使用前檢查減速機狀態

選項2

 async componentDidMount(){
   //set loader true
   await this.props.getData;
   //set loader false
 }

Answer 2

您可以實現“加載”狀態

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)

編輯; 返回承諾而不是已解決的數據； （不確定語法）

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'
            }
        })
    })
}