How to write log in logic in redux?

Question

I am new to redux. I am trying to make a user login.

I just want to understand the logic to send information through action.

I want a user enters username and password and will be logged in and his status will be marked online. Here is the flow:

UI -> ACTION -> MIDDLEWARE -> REDUCER

So, when a user clicks on login button, that action will be passed to reducer.

I have 3 options to implement this:

1. User clicks on login button, a function will be called which will get the user id of the user (using map in store.getState) and that id will be passed to action which then will be sent to reducer.

action(userid) => reducer

2. User clicks on login button, a function will be called and then username will be passed to the action. The reducer then fetches the userid and set the status of the user id.

action(username) => reducer

3. Use a middleware to fetch the userid and send that to reducer

action(username) => middleware => reducer

How should I apply log in logic to my app.

Answer 1

this is the normal flow in my opinion:

1. User enter username/password
2. Either recover these info with ref or with this.state (depends on use case)
3. make a action with an action creator (doLog(username, pass))
4. dispatch that action
5. Reducer will "catch" the action and async fetch from server. you can use redux-tunk or redux-saga so you can dispatch another action when the login is done (loginSuccessAction())
6. again, reducer should "catch" that action, and update the store
7. now the store is changed to a new state, the page should updated (with mapStateToProps)