React component isn't subscribing to the redux store - reactjs

Question

I created component and connected it using connect() like this:
function mapStateToProps(state) {
return { users: state.users.users }
}
function mapDispatchToProps(dispatch) {
return { userActions: bindActionCreators(UserActions, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Test)
Sadly when I open React tools in chrome I get this:
Changing the state isn't forcing component to update. Why it isn't subscribing to it?
EDIT:
I'm changing state through action creator and reducer. This is how it looks like:
export function addUser(user) {
return function (dispatch) {
axios.post('http://localhost:4200/users/add/user', {user:user})
.then(() => dispatch({
type: USER_ADD,
user: user
})).catch(err => console.log(err));
}
}
export function getUsers() {
return function (dispatch) {
axios.get('http://localhost:4200/users')
.then((response) => dispatch({
type: REQUEST_USERS,
users:response.data
})).catch(err => console.log(err));
}
}
and reducer:
export function users(state = initialState, action) {
switch (action.type) {
case 'USER_ADD':
{
return {
...state,
users: [
...state.users,
action.user
]
}
break;
}
case 'REQUEST_USERS':
{
return {
...state,
users: [
action.users
]
}
break;
}
.........
and this is my full component:
class Test extends Component {
constructor(props) {
super(props);
this.state = {
login: "",
password: ""
}
}
handleLoginInputChange = (e) => {
this.setState({login: e.target.value})
}
handlePasswordInputChange = (e) => {
this.setState({password: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault()
let user = {login:this.state.login,
password:this.state.password,userId:Math.floor(Math.random()*(100000))};
this.props.userActions.addUser(user);
}
render() {
return (
<div className="test">
<form>
<input type="text" onChange={this.handleLoginInputChange} value=
{this.state.login} placeholder="login"/>
<input type="text" onChange={this.handlePasswordInputChange}
value={this.state.password} placeholder="pass"/>
<button onClick={this.handleSubmit}>send</button>
</form>
<UsersList users = {this.props.users} />
</div>
)
}
componentDidMount() {
this.props.userActions.getUsers();
}
}
function mapStateToProps(state) {
return { users: state.users.users }
}
function mapDispatchToProps(dispatch) {
return { userActions: bindActionCreators(UserActions, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Test)
I've added everything to github so you could see it github.
Things that could interest you are in reducers/users.js, actions/useractions and in components/Test.js.
My state after getting data from server looks like this:.
I tried many different approaches. Right now I gave up changing the state after adding new user. Instead of that I've made button which can get data from the server - it's reloading the page so I'm not pleased with that solution

Answer 1

Are you sure that this is correct?
function mapStateToProps(state) {
return { users: state.users.users }
}
how are you binding your reducer to the store? The state might be different from what you expect in connect. Can you post what the store contains after the component gets mounted?