Redux state coming out to be undefined - reactjs

Question

I am having tough time figuring out why my redux state is coming out to be undefined on a later stage.
so I have an action which looks like this
export const coinUpdateState = (booleanValue) => {
console.log(typeof booleanValue) //This logs Boolean
return function (dispatch) {
dispatch({
type: COIN_UPDATE_STATE,
payload: booleanValue
})
}
}
and a reducer which looks like this
const initialState = {
DataFetching: true,
DataSucess: [],
DateError: [],
DateError: false,
DataSort: true,
DataUpdate: true
}
export default function(state = initialState, action) {
switch (action.type) {
case EXCHANGE_CURRENCY_FETCHING:
return {
DataFetching: true,
DataSort: true
}
case EXCHANGE_CURRENCY_FETCH_SUCCESS:
return {
...state,
DataSucess: action.payload,
DataFetching: false,
DataSort: false
}
case EXCHANGE_CURRENCY_FETCH_ERROR:
return {
...state,
DateError: action.payload,
DataFetching: true,
DateError: true,
DataSort: true
}
case COIN_UPDATE_STATE:
console.log(action.payload) //This logs the boolean value I am sending
return {
DataUpdate: action.payload
}
default:
return state
}
}
Later I am using it like this in my app
render () {
console.log(this.props.cryptoUpdateState)
if (this.props.cryptoUpdateState) {
console.log("Inside if render")
displayData = async () => {
this.coinURL = await AsyncStorage.getItem("CryptoCurrencySelected").catch((error) => {
console.log(error)
})
if (this.coinURL != "undefined" && this.coinURL != null) {
console.log("Inside Async", this.coinURL)
this.props.exchangeToDisplay(this.coinURL)
}
if (this.coinURL == null || this.coinURL == "undefined") {
console.log("Null", this.coinURL)
this.coinURL = "BTC"
}
}
displayData()
this.props.coinUpdateState(false)
}
In the above snippet notice the initial console.log, it logs true correctly the first time, there after it logs undefined in console when I am actually passing false (this.props.coinUpdateState(false)).
Also Notice the logs in my code, they are logging the value I am sending correctly everywhere besides in the later stage where it is logging undefined (in console.log).
Question: What could I be doing wrong here?

Answer 1

A reducer will return a new version of the state of your app. If you don't want to lose your previous state you will need to make sure you always return it with any additions/modifications you need.
Whatever is returned from the switch case that is triggered is going to be the next version of state, which for COIN_UPDATE_STATE is going to just have DataUpdate in.
Make sure all you are doing ...state for all your redux reducer actions in order to make sure you keep state.
e.g.
case COIN_UPDATE_STATE:
return {
...state,
DataUpdate: action.payload
}