Setting default state for Redux store via axios - node.js

Question

I have a node server that performs CRUD operations on data stored in a MongoDB Atlas database. My front-end is made using react where i am using redux for state management. Before I had the backend setup, I was initializing the default state of the redux store by calling a function i made which just returns JSON data. Now I want to make a get request to the server via axios to retrieve that same JSON data which is now on the Mongo database.
I know that I should be making axios get calls in componentDidMount lifecycle hook but my store.js is not a class but i'm not sure how. I am however able to just do axios.get(URL) but it returns an object in the form of [[PromiseStatus]]:"resolved", [[PromiseValue]]:{the data i want}. I read that these are not accessible. Im wondering if it is because I am not making the axios call in the right place or in the right time in the lifecycles.
import { createStore } from "redux";
//import { syncHistoryWithStore } from "react-router-redux";
//import { browserHistory } from "react-router-dom";
import axios from "axios";
//import the root reducer.
import rootReducer from "../reducers/rootReducer";
//this is just getting JSON from a file
import { getAnnotations } from "../services/fakeEntry";
//create an object for default data
const defaultState = {
//This is how i was creating the default state before.
// metadata: getAnnotations()
//this is what id like to do.But this needs to be in a lifecycle hook?
metadata: axios
.get("http://localhost:5100/data/")
.then(response => {
return response;
})
.catch(function(error) {
console.log(error);
})
};
const store = createStore(rootReducer, defaultState);
export default store;
The code above is the redux store. I have tested the endpoint using postman and it returns the JSON data. When i read this redux state using mapStateToProps in another component i get returned a Promise object.

Answer 1

I see two mistakes in your approach.
Redux is built from principles of functional programming and based on pure functions (without side effects, like API calls). So default state should some default empty object like below
const defaultState = {
metadata: {} // It should be empty during store init
isDataInitialized: false // You can add additional property to denote, that data is not fetched for the first time
}
axios returns Promise (as you already discovered). So take data from Promise, you should either user .then and set data in callback, or use async\await
Here is sample using async\await
// Now it is function, not object
const getInitalData = () => async dispatch => {
try {
let metadata = await axios
.get("http://localhost:5100/data/");
// You're dispatching not only the metadata, but also setting isDataInitialized to true, to denote, that data has been loaded
dispatch ({ type: 'DATA_INITIALIZED', metadata, isDataInitialized: true });
}
catch {
console.log(error);
}
}
Essentially getInitalData is action creator, which will dispatch action DATA_LOADED to store.
And you should create store with middleware (like thunk), to be able to dispatch actions which are functions.
const store = createStore(rootReducer, applyMiddleware(
thunkMiddleware
))
defaultState should go to reducer directly, like below
rootReducer (state = defaultState, action) {
// ...
Then, in some root component of your app, you call getInitalData to load data from server to store.
Here is simple sample you can use for better understanding