Почему не перерендеривается React компонент после диспатча в Redux?

Question

[glebvvs]

Проблема в том, что после диспатча в декораторе connect() в redux происходят изменения и эти изменения можно словить к примеру если напрямую подписаться к redux и получить состояние хранилища, но в свойствах самого компонента, который вызвал диспатч изменения не происходят и компонент не перерендериватся...

В чем может быть проблема?

Вот мой главный компонент...

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Login from './auth/Login'
import Registration from './auth/Registration'
import { Provider } from 'react-redux';
import { createStore } from 'redux';

let myStore = function(state = ['test'], action) {
	if ( action.type === 'ADD_TEXT' ) {
		state.push(action.payload);
		return state;
	}
	return state;
};

const store = createStore(myStore);

store.subscribe(() => {
	console.log(store.getState());//после dispatch внутри компонента Login состояни ехранилища меняется
});

export default class Main extends Component {

	constructor(props) {
		super(props);
	}

	renderForGuest() {
		return (
			<Provider store={store}>
				<div className="auth">
					<Login />
					<Registration />
				</div>
			</Provider>
		);
	}

	render() {
		return this.renderForGuest();
	}
}

//вот компонент, где вызывается диспатч к редаксу

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Login extends Component {

	constructor(props) {
		super(props);

		this.state = {
			errorMessagesForForm: null
		};
	}

	submitForm(event) {
		event.preventDefault();
		this.props.onSubmitForm();


	}

	render() {
		return (
			<div className="login">

				<ul>
					{
						this.props.testStore.map((text, index) => (
							<li key={index}>{text}</li>
						))//а этот список не перерендеривается после dispatch
					}
				</ul>

				<form>
					<div><input className="form-field" type="text" placeholder="username" /></div>
					<div><input className="form-field" type="password" placeholder="password" /></div>
					<button onClick={this.submitForm.bind(this)}>Login</button>
				</form>
			</div>
		);
	}

}

export default connect(
	state => ({
		testStore: state
	}),
	dispatch => ({
		onSubmitForm: () => {
			dispatch({type: 'ADD_TEXT', payload: 'wtf'});
		}
	})
)(Login);

Answer 1

[webe]

glebvvs,

state.push(action.payload);
    return state;

замени на:

return [...state, action.payload];

Comments

[glebvvs]

Спасибо огромное. Но можно маленький ликбез? почему мой первоначальный вариант не подходит?

[polarlord]

Если в двух словах. Redux делает сравнение методом shallow equal для определения обновления стейта. Таким образом когда вызывается Array.push() объект стейта не меняется и обновления не происходит. Отсюда вытекает основное правило при работе с редьюсерами - они не должны менять стейт, они должны возвращать новый объект.

[glebvvs]

polarlord, спасибо)