Pfthb

I am using react.js with redux to build my project.
Currently, I store users' token in global state. But how to fetch the token before every component mount? For example. I have an axios action in redux to fetch data from REST API in ComponentDidMount:

Now, this method will goes to catch in ComponenDidMount becuase it cannot fetch the the token (it is null at first and stored in another reducer).

 componentDidMount() 
 this.props.loadProfile()
 


// in actions
export const loadProfile = (token) => 

 return (dispatch, getState) => 
 dispatch(loadProfileStart())
 const getUrl = URL + 'myprofile/'
 return axios.get(getUrl, 
 headers: 
 ...HEADERS,
 'Authorization': 'Token ' + token // token is in another reducer,
 
 )
 .then(res => 
 dispatch(loadProfileSuccess(res.data.profile))
 return res.data.profile

 )
 .catch(err => 

 dispatch(loadProfileFail(err))
 throw (err)
 )
 

I did some research which said I should use middleware. But I still dont understand the getState because my store is inApp.js

const store = createStore(rootReducer, compostEnhancer(
 applyMiddleware(thunk )
))

const app = (
 <Provider store=store>
 <BrowserRouter>
 <App/>
 </BrowserRouter>
 </Provider>)

Thanks for your help!

in my project if test in App constructor if user is logged in. For that, i control in my redux state my variable isLoggedIn. I use mapStateToProps for this.

If isLoggedIn i get token from API and i save him in localstorage then i show home componant else is !isLoggedIn i show loggin componant.
I hope this way help you a little.