React-redux state undefined error in my reactJS Component

Question

This is my initial state :

 export const initialState = {
  currencieList: [],
  currentPage: 1,
  pageCount: 1,
  itemsPerPage: 20,
};

Here is my redux-saga with which I want to trigger an action:

  function* loadDataAsync() {
  console.log("SAGAS WORKS");
  yield delay(5000);
  try {
    const {body: data} = yield call(agent.get, "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=xxx");
    getCurrencies({currencies : data.data});
    console.log('--------getCurrencies', getCurrencies);
    setPageCount();
    yield put({type:"LOAD_DATA_ASYNC"});
  } catch (err) {
    console.log(err)
    yield put({type:"LOAD_DATA_ASYNC_ERROR"})
  }
}

export function* watchLoadDataAsync() {
  yield takeLatest("LOAD_DATA", loadDataAsync);
}

Getcurrencies reducer :

 export const getCurrencies = (currencies) => {
  return {
    type: actionTypes.LOAD_DATA_ASYNC,
    payload : currencies,
  };
};



 case actionTypes.LOAD_DATA_ASYNC:
  return {
    ...state,
    currencieList: action.currencies,
  };

And here is how I'm calling getcurrencies in my component :

     componentDidMount() {
    const { getCurrencies} = this.props.actions
    setInterval(() => {
      getCurrencies();
    }, 30000);
  }

Problem ---------

The problem is whenever componentDidMount executes getcurrencies. I'm getting error that can not slice .... undefined

const { currencieList, currentPage, itemsPerPage } = this.props;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = currencieList.slice(indexOfFirstItem, indexOfLastItem);

I console.log-ed currencieList and before render it is empty array is it should be but after render it becomes undefined and I have no idea why. I also checked if I'm getting data correctly in my redux-saga and it is correct.I'm retrieving the data it is not undefined Any suggestions please?

What do you expect ? You're calling getCurrencies with no parameter (undefined) in componentdidMount! Where's the data gonna come from ? Don't use yield if you don't understand it! — Melchia
– Melchia, Commented Jul 31, 2020 at 11:25
That's how redux react works: componentdidMount => retrieve data => trigger a redux action with the data => Update the store => Update the component state — Melchia
– Melchia, Commented Jul 31, 2020 at 11:31
And in my case I have to just trigger the action in the componentdidMount right? — Roffulus
– Roffulus, Commented Jul 31, 2020 at 11:33

Priyanka Panjabi · Accepted Answer · 2020-07-31 13:01:54Z

1

In ComponentDidMount write it like :

componentDidMount() {
const { getCurrencies} = this.props.actions
setInterval(() => {
  getCurrencies([]);
}, 30000);

} and then in your saga write it like :

 yield put(getCurrencies(data.data);

and then in reducer write :

case actionTypes.LOAD_DATA_ASYNC:
  return {
    ...state,
    currencieList: action.payload,
  };

answered Jul 31, 2020 at 13:01

Priyanka Panjabi

4411 gold badge5 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React-redux state undefined error in my reactJS 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