Why does redux-persist not work right on ajax calls? - react-native

Question

So I loaded data with axios in my action like this:
import * as types from './actionTypes';
import axios from 'axios';
export function fetchQuestions(city) {
return function (dispatch) {
axios.get('http://rest.learncode.academy/api/test123/tweets')
.then((response) => {
dispatch({type: "FETCH_QUESTIONS_SUCCESS", payload: response.data})
})
.catch((err) => {
dispatch({type: "FETCH_QUESTIONS_FAILURE", payload: err})
})
}
};
And it loads into questions in my reducer:
const initialState = {
fetching: false,
fetched: false,
questions: [],
error: null,
}
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case types.FETCH_QUESTIONS_SUCCESS:
return {
...state,
questions: action.payload
};
case types.FETCH_QUESTIONS_FAILURE:
return {
...state,
error: action.payload
};
default:
return state;
}
}
I call it like this on the first page of my app in the constructor:
constructor(props) {
super(props);
if(!this.props.questions){
this.props.actions.fetchQuestions();
}
}
So with that I want to only use it when questions is empty.
On another page when I do console.log(questions) it tells me questions is empty. While I did load it before so it should still be loaded since I am using redux-persist.
When I click a button on that page and console.log(questions) again it does show the data.