How to fetch updated state in Component while using Redux - reactjs

Question

I am new to redux, I am getting confused about how to get State from Redux Store when we have multiple Reducer.
let Say this is my combineReducer
import apiCallInProgress from './ApiStattusReducer';
import login from './loginReducer';
const rootReducer = combineReducers({
login,
apiCallInProgress
});
export default rootReducer;
// below is my Login Reducer
const initialState = {
isAuthenticated: false,
user: {}
};
export function loginReducer(state = initialState, action = {}) {
console.log(action.user);
switch (action.type) {
case types.SET_CURRENT_USER:
return {
...state,
isAuthenticated: true,
user: action.user
}
default:
return state
}
}
export default loginReducer;
// now I want to access user from my component,
// I wrote as
function mapStateToProps(state) {
return {
login: state.login
}
}
componentDidMount() {
const { login } = this.props
console.log("set user didmount:" + login.user)
}
componentDidUpdate() {
const { login } = this.props
console.log("set user didupdate:" + login.user)
}
I am not able to get the state of user in the component but when I am pressing login button console.log(action.user) showing proper output in console .
The variable names we mentioned inside combineReducer, the same name do I need to use inside mapStateToProps func to fetch the state. I am very much confused. Someone, please explain.

Answer 1

I think you're doing everything right till you get to the component (although difficult to fully determine without actually testing the code). The main issue is, as far as I can see, you're not actually dispatching the action so login.user is never being set.
The connect method of react-redux has two function parameters - mapStateToProps, which you're using correctly, and mapDispatchToProps, which it doesn't look like you're using.
mapDispatchToProps is a method to pass Redux actions into props, which when invoked, will fire the action, which will in turn be picked up by the reducer, which will return a new state object. Create a new directory called actions in the root of your app. Inside it, create a file called loginActions.js, and within that, put something like the following:
export function setCurrentUser(user) {
return (dispatch) => {
dispatch({ type: 'SET_CURRENT_USER', user)
}
}
import this function into your component, then in your connect function, add mapDispatchToProps
import { connect } from 'react-redux'
import { setCurrentUser } from './actions/loginActions'
// component code
const mapDispatchToProps = {
setCurrentUser: setCurrentUser
}
const mapStateToProps = (state) => {
return {
login: state.login
}
}
connect(mapStateToProps, mapDispatchToProps)(YourComponentName)
In your componentDidMount method, you can now call this action:
componentDidMount() {
this.props.setCurrentUser('myUser')
}
in componentDidUpdate, the user should now be available:
componentDidUpdate(prevProps) {
if (prevProps.login !== this.props.login) {
console.log(this.props.login)
}
}
I hope this helps. Let me know if you need any more help.