React not responding to (redux) state change? - reactjs

Question

For some reason react is not re-rendering when the (redux) state changed. Might it be because it is nested 1 level? Also in the redux inspector I can see that the state has changed correctly and as expected. On manually refreshing the page, I can also see that it worked. But I am confused on why it is not re-rendering automatically.
Simplified Class Component
class Users extends Component {
render() {
const something = this.props.users.users;
return (
<div>
<div className='MAIN_SECTION'>
<SearchBar handleChange={(value) => this.setState({searchQuery: value})} />
<div className='LIST'>
{something.mapObject((user) => <div onClick={() => this.props.deleteUser(user.id)}>{user.name}</div>)}
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
users: state.users
};
}
export default connect(mapStateToProps, { deleteUser })(Users);
Action Creator
export function deleteUser(userhash) {
return function (dispatch, getState) {
return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
const data = {
status: 200,
data: {
status: 200
}
};
if (data.status === 200) {
const newState = getState().users.users;
delete newState[userhash];
dispatch({
type: DELETE_USER,
payload: {
data: newState
}
});
}
});
};
}
Reducer
const INITIAL_STATE = {
isFetching: true,
users: {}
};
case DELETE_USER:
return {
...state,
users: action.payload.data
};

Answer 1

Once you dispatch action DELETE_USER,
const something = this.props.users.users;
doesn't look right.
You are doing this in action which means something must be this.props.user.
const newState = getState().users.users;
delete newState[userhash];
dispatch({
type: DELETE_USER,
payload: {
data: newState
}
});
In your render, this.props.users itself is the array of users.
To have a dirty fix, changing mapStateToProps to:
function mapStateToProps(state) {
return {
users: state.users.users || state.users
};
}
Change in render:
const something = this.props.users;

Answer 2

The code doesn't really jive to me. In one spot you are you are using .map() on users.users and in another spot you are using delete[newHash] on it. So is it an array, or an object?
But hypothetically, let's say it did work. You say that that the state has changed correctly.
Let's assume the initial state is
{
isFetching: true,
users: { users: ['12345', '67890'] }
}
Let say user '12345' gets deleted, in the action, we have these sequence of events
const newState = getState().users.users; // ['12345', '67890']
delete newState[userhash]; // ['67890'] if you use your imagination
dispatch({
type: DELETE_USER,
payload: {
data: newState // ['67890']
})
Finally, in the reducer
case DELETE_USER:
return {
...state,
users: action.payload.data // ['67890']
};
So the final state is
{
isFetching: true,
users: ['67890']
}
It's not the same shape as the original state - users no longer has a users.users.