反应Redux认证

Question

I have the following situation, I have a REST API and a React+Redux application.

When the user login I'm saving the token to the localStorage, based on that, if the user comes back to the page I make a call to the server /api/whoami { token } with the token, there I validate the token and return the user details which I will use to update my Redux store.

My problem is that if I refresh and I want to do something in componentDidMount , even if the user is logged in the Redux store isn't updated yet because the request to /api/whoami is not finished.

How can I wait until the request to /api/whoami is done and the user is set then render my application?

Is there any other solution for this kind of issue?

Thanks!

Answer 1

You can use, what is called as an Aync action in your case, and show a loading component while the details are fetched.

Here you will have to use the thunk middleware . It comes in a separate package called redux-thunk . When an action creator returns a function, that function will get executed by the Redux Thunk middleware. Read in more detail here

Functioning: Before you start the fetch operation, dispatch and action which sets the isLoading to true and after you have received your response you dispatch another action which will set isLoading: false and on your display just put a condition that if the isLoading is true you return a loading component else you return the profile component

Answer 2

I suppose that you know react-redux and you are familiar to some concepts like action , store , reducer .

How can I wait until the request to /api/whoami is done?

Use a middleware like redux-thunk , [redux-saga][1] ... i recommend you to use redux-saga because it is a library that aims to make side effects (ie asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

How the user is set then render my application?

With using middleware , you can render the loading view while the request is running and render what you want when the request has finished.

Read redux-saga offical document for more infomation and usage example.