React Redux reducer not Updating State

Question

So I have a reducer which doesn't seem to be updating the state at all whenever I called the 'LOGIN' action. It could be a problem with my React Redux code. It's either my component is not getting re rendered whenever the store's state changes or the reducer is not changing the stores state at all.

Reducer ------

const initialState = {
    messages: [],
    loginDetails: {
        email: '',
        password: ''
    },
    activeUsers: [],
    loginActive: false
}

const messageReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_MESSAGE': 
            if(state.messages.length < 50) {
                let newStateMessages = [...state.messages]
                newStateMessages.unshift(action.payload);
                console.log(newStateMessages);
                return {...state, messages: newStateMessages};
            } else {
                let newStateMessages = [...state.messages]
                newStateMessages.pop();
                newStateMessages.unshift(action.payload);
                return {...state, newStateMessages};
            }
        case 'LOGIN':
            console.log('LOGIN');
            console.log(action);
            const newLoginDetails = {
                email: action.payload.email,
                password: action.payload.password
            };
            console.log({...state, loginDetails: newLoginDetails});
            return {...state, loginDetails: newLoginDetails};
        case 'UPDATE_USERS':
            const newActiveUsers = action.payload;
            return {...state, activeUsers: newActiveUsers};
        case 'LOGIN_ACTIVE':
            return {...state, loginActive: true};
        case 'LOGIN_EXIT':
            return {...state, loginActive: false};
        default:
            return state;
    }
}

export const store = createStore(messageReducer);

React Redux connect -----

    const mapStateToProps = state => {
      return { ...state }
    }

    export default connect(mapStateToProps)(Home);

This mapStateToProps returns...

{
   activeUsers: []
   dispatch: ƒ dispatch(action)
   loginActive: true
   loginDetails: {email: "", password: ""}
   messages: []
   __proto__: Object
}

when it should return...

{
   activeUsers: []
   loginActive: true
   loginDetails: {email: "[email protected]", password: 
   "password"}
   messages: []
   __proto__: Object
}

I have tested for sure that the dispatch to the reducer is getting called, and the payload is correct. However, the reducer is failing to update the state with the LOGIN action type.

Provided code samples show no signs of what may cause the problem. Would you provide executable snippet, reproducing your problem? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Sep 22, 2020 at 12:41
The console statements in case 'LOGIN' are being hit, but the props contain no value? Did you verify what state is in mapStateToProps? — Yatrix
– Yatrix, Commented Sep 22, 2020 at 12:45
What does the action parameter look like? Can you include the console.log(action) output for the LOGIN action — user208567
– user208567, Commented Sep 22, 2020 at 13:21

Aftab22 · Accepted Answer · 2020-09-25 19:50:30Z

1

Can you try this:

const mapStateToProps = ({activeUsers,loginActive,loginDetails,messages}) => ({
   activeUsers,
   loginActive,
   loginDetails,
   messages
})

answered Sep 25, 2020 at 19:50

Aftab22

5506 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Redux reducer not Updating State

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related