mapStateToProps in react-redux

In this chapter, we will understand what is mapStateToProps in react-redux and why it is needed. When we connect the store to react with the methods connect, it asks the developer to pass an object, which provides the list of properties which will be mapped to the props object. Let’s see an example for accessing a state of isEmployeeLoggedIn.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { emailValidator, passwordValidator } from '../../utils/validation';

const LoginForm = (props) => {
    const [email, setEmail] = useState({ value: '', error: '', class: '' });
    const [password, setPassword] = useState({ value: '', error: '', class: '' });
    const [isFormValid, setisFormValid] = useState(false);
    const validateForm = () => {
        const validateEmail = emailValidator(email.value);
        const validatePassword = passwordValidator(password.value);

        if (validateEmail) {
            setEmail({ ...email, error: validateEmail.message, class: validateEmail.class });
            setisFormValid(false);
            return false;
        }
        if (validatePassword) {
            setPassword({ ...password, error: validatePassword, class: validatePassword.class });
            setisFormValid(false);
            return false;
        }
        setisFormValid(true);
        return true;
    }
    return (
        <div className='form'>
            <h1>Enter credentials</h1>
            <input
                type="text"
                name="email"
                value={email.value}
                className={email.class}
                placeholder="Email"
                onChange={e => setEmail({ value: (e.target.value), error: '', class: '' })}
                onBlur={()=>validateForm()}
            />
            <input
                type="password"
                name="password"
                className={password.class}
                value={password.value}
                onChange={e => setPassword({ value: (e.target.value), error: '', class: '' })}
                placeholder="Password"
                onBlur={()=>validateForm()}
            />
            <button disabled={!isFormValid} onClick={props.onLogin}>Login</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        isEmployeeLoggedIn: state.login.isEmployeeLoggedIn
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({
            type: 'LOGIN'
        })
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

As we can see in the above code snippet, we are assigning isEmployeeLoggedIn from the state to the property isEmployeeLoggedIn, which is created in the reducer in the initial state.
isEmployeeLoggedIn: state.login.isEmployeeLoggedIn

const rootReducer = combineReducers({
  login: login,
  init: init
})
const store = createStore(rootReducer);