Redux updating the wrong state, setting previously set state to null - reactjs

Question

I have two redux state variables, one that hold an array of user information and one that holds a true/false value for a side drawer open/close feature. The true/false value triggers a className change which triggers CSS to open/close the drawer. The array of user information is fetched from a firebase cloud firestore database collection.
For some reason after the user array is fetched and saved to the redux state and a user opens the side drawer the redux action sent is only for the side drawer, but the side drawer and users information is changed.
The side drawer opens like normal, but the user array is set to null.
Redux Events:
Initial State: https://imgur.com/a/IgvXMLe
After side drawer is opened: https://imgur.com/a/wVRg6Az
Side Drawer Event Difference: https://imgur.com/a/u1hrcvT
Side Drawer Component
class SideDrawer extends Component {
render() {
let drawerClasses = ['side-drawer'];
if (this.props.toggled) {
drawerClasses = ['side-drawer', 'open'];
}
return (
<div className={drawerClasses.join(' ')} >
<div className="side-drawer-container" >
<div className="router-login-button" onClick={this.props.toggleSideDrawer} >
<OktaAuthButton />
</div>
<div className="side-drawer-link" onClick={this.props.toggleSideDrawer} >
<Link to="/" >Map</Link>
</div>
<div className="side-drawer-link" onClick={this.props.toggleSideDrawer} >
<Users />
</div>
</div>
</div>
)
}
}
const mapStateToProps = ({ sideDrawer }) => ({
toggled: sideDrawer.toggled,
});
const mapDispatchToProps = (dispatch) => {
return {
toggleSideDrawer: () => dispatch({ type: TOGGLE_SIDEDRAWER, payload: true })
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SideDrawer);
Side Drawer Reducer
import { TOGGLE_SIDEDRAWER } from './actions';
const initialState = {
toggled: false
};
export default function sideDrawerReducer(state = initialState, action) {
switch (action.type) {
case TOGGLE_SIDEDRAWER:
return Object.assign({}, state, {
toggled: action.payload
});
default:
return state;
}
}
Users Component
class Users extends Component {
/* commented code not needed to be shown */
componentDidMount() {
initializeFirebaseApp();
// Get user list from firestore 'users' collection
this.loadUsers();
}
async loadUsers() {
getAllUsers().then((users) => {
this.props.setUsers(users);
});
}
render() {
if(this.props.users != null) {
var users = this.props.users.map((el, i) => (
<li key={el.id} className='user' onClick={this.props.toggleSideDrawer}><Link to={"/user/" + el.id}>{el.firstname}</Link></li>
));
console.log(users);
}
console.log(this.props.users);
return (
<div className="user-container">
{users}
</div>
)
}
}
const mapStateToProps = ({ users }) => ({
users: users.friends
});
const mapDispatchToProps = (dispatch) => {
return {
setUsers: (users) => dispatch({type: SET_FRIENDS, payload: users}),
toggleSideDrawer: () => dispatch({ type: TOGGLE_SIDEDRAWER, payload: false })
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Users);
Users Reducer
import { SET_FRIENDS } from './actions';
const initialState = {
friends: null,
groups: null
};
export default function userReducer(state = initialState, action) {
switch(action.type) {
case SET_FRIENDS:
return Object.assign({}, state, {
friends: action.payload
});
default:
return initialState;
}
}
I expect the side drawer to open and render the list of users in the drawer under the "Login" and "Map" Links

Answer 1

The default case for userReducer is returning initialState instead of state so every action through the redux store that is not SET_FRIENDS (e.g. TOGGLE_SIDEDRAWER) will reset the userReducer to initialState where users is null. Return state instead and you should be good to go.
export default function userReducer(state = initialState, action) {
switch(action.type) {
case SET_FRIENDS:
return Object.assign({}, state, {
friends: action.payload
});
// Change to `return state;`
default:
return initialState;
}
}