React - Redux wait fetch result before render component

Question

I have some react-redux project. I have some component which i wan't to list some data from api. simply i dispatch action from my component inside of componentDidMount method, which fetch data.

When i refresh page i make console.log my redux state.

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.

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?

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)

Can you also post your component? Are you sure your component not updating? The reducer and fetch looks fine. The way you are describing it sounds like the console log and error undefined is caused because this scripts are fired before the async call is finished. — Mkk
– Mkk, Commented Feb 27, 2019 at 15:26
@Mkk i understand. Yes its because of async but how prevent it ? i'm updated the my question with component — user3348410
– user3348410, Commented Feb 27, 2019 at 17:11

sathish kumar · Accepted Answer · 2019-02-27 15:30:01Z

2

Option 1

check the reducer state before use

Option 2

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

answered Feb 27, 2019 at 15:30

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - Redux wait fetch result before render component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related