CODEWITHSUNDEEP
reactjsreduxreact-redux
kumar
kumar

Reputation: 109

How to Access the State of the reducer in other reducer in reat redux

I have login page component where i have a state which is boolean called isUserAuthenticated, when i'm clicking on the login button which checks for the userslist wheather the user exists or not. users list is in signupreducer, how can i access the users list in loginreducer and return the isUserAuthenticated flag from it.

LoginPage Component

export const mapStateToProps = (state) => {
    return {
        isUserAuthenticated: state.reducer.isAuthenticated.isUserAuthenticated,
        users: state.SignupReducer.users
    }
}

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (credentials) => dispatch({ type: 'CHECK_LOGIN', credentials })
    }
};

LoginPage = connect(mapStateToProps, mapDispatchToProps)(LoginPage);

export default LoginPage;

Login Reducer

const initialStateAuth = {
    isUserAuthenticated: false
};

export const isAuthenticated = (state = initialStateAuth, action) => {
    switch (action.type) {
        case 'CHECK_LOGIN':
            return Object.assign({}, state, { isUserAuthenticated: checkLogin(state, action) })
        default:
            return state;
    }
}

Here actually i want to check the user in singupReducer.users how can i access here....

const checkLogin = (state, action) => {
    let isExist = false;
    signupReducer.users.map((each) => {
        if (each.userName === action.credentials.username && each.password === action.credentials.password) {
            isExist = true;
        }
    });
    return state.isUserAuthenticated = false;

}

Upvotes: 1

Views: 805

Answers (3)

kumar
kumar

Reputation: 109

I did Like this i'm able to access now and it is working, anybody suggest me is that a correct way of doing.

export const mapStateToProps = (state) => {
    return {
        isUserAuthenticated: state.reducer.isAuthenticated.isUserAuthenticated,
        users: state.SignupReducer.users
    }
}

Here i'm selected the other reducer state in mapStateToProps then after i'm preparing a class in my click event like this

onLogin = () => {
        var credentials = {
            username: this.userName,
            password: this.password
        }
        var loginFormData ={
            credentials:credentials,
            users:this.props.users
        }
        this.props.checkLogin(loginFormData);
    }

Finally i'm dispatching my action with credentilas of login form and state of other reducer

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (loginFormData) => dispatch({ type: 'CHECK_LOGIN', loginFormData })
    }
};

Upvotes: 0

Kyle Richardson
Kyle Richardson

Reputation: 5645

There's another way, if you don't want to share data between reducers. To accomplish this you use getState and include what you need from state in the action you are sending to the reducer which needs it. Here is an example: Alternative to sharing data between slice reducers

function someSpecialActionCreator() {
    return (dispatch, getState) => {
        const state = getState();
        const dataFromB = selectImportantDataFromB(state);

        dispatch({
            type : "SOME_SPECIAL_ACTION",
            payload : {
                dataFromB
            }
        });
    }
}

Upvotes: 0

Andy_D
Andy_D

Reputation: 4228

I'm assuming you're using combineReducers to set up your state tree. You'll need to write a custom combination function that passes the state you need (from signup) to the login reducer.

There's an example of how to do this in the redux docs: http://redux.js.org/docs/recipes/reducers/BeyondCombineReducers.html#sharing-data-between-slice-reducers

Upvotes: 2

Related Questions