Как правильно получать обновленный Store в React Reduxe?

Question

[Ken Jee]

В методе render() компоненты происходит запись данных в Redux Store и сразу после записи сотответствующий объект остается неизмененным. При этом метод componentWillReceiveProps не отрабатывает. Что я делаю не так? Как правильно получать в компоненте измененный Store? Сразу скажу, что ошибок в консоле нет, редьюсер данные получает и возвращает обновленный state!

Отрывок из метода render компоненты ActionsReducers

console.log( this.props.men ); // Изначально UNDEFINED

this.props.addMan( [ { name: 'Альберт', family: 'Эйнштейн' } ] ); // Запись в хранилище

console.log( this.props.men ); // Все равно UNDEFINED

Весь код компоненты ActionsReducers

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

import { add as addMan } from './../actions/men';

class ActionsReducers extends React.Component {

    constructor( props ) {

        super( props );

    }

    componentWillReceiveProps( nextProps ) {

        console.log( nextProps );

    }

    render() {

        console.log( this.props.men );

        this.props.addMan( [ { name: 'Альберт', family: 'Эйнштейн' } ] );

        console.log( this.props.men );

        return (
            <div>
                <main>
                    <h1>Действия и редьюсеры</h1>
                    <div>
                        <div className='pure-g'>
                            <div className="pure-u-1-2">
                                <h2>Люди</h2>
                            </div>
                            <div className="pure-u-1-2">
                                <h2>Животные</h2>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        );
    }

}

function mapStateToProps( store ) {

    return {
        men: store.men,
    }

}

const mapDispatchToProps = {

    addMan

};

export default connect( mapStateToProps, mapDispatchToProps )( ActionsReducers );

Answer 1

[Антон Спирин]

В render такие действия выполнять нельзя. Хоть dispatch и выполняется синхронно, свойства получаемые компонентом иммутабельны, а это значит, что компонент получит новые свойства, выполнит все функции жизненного цикла и получит новый массив men, только в следующий render.

Для добавления вашей сущности можно использовать хандлер:

class ActionsReducers extends React.Component {
  handleAddMan = () => {
    this.props.addMan({ name: 'Альберт', family: 'Эйнштейн' });
  };
  
  render() {
    const { men } = this.props;

    return (
      <Wrapper>
        <List>
          {men.map(man => <Man key={man.id} man={man} />)}
          {!men.length && <Empty>No data in list.</Empty>}
        </List>
        <Button onClick={this.handleAddMan}>Add man</Button>
      </Wrapper>
    );
  }
}

Или один из методов жизненного цикла:

class ActionsReducers extends React.Component {
  componentDidMount() {
    this.props.addMan({ name: 'Альберт', family: 'Эйнштейн' });
  }

  render() {
    const { men } = this.props;

    return (
      <Wrapper>
        <List>
          {men.map(man => <Man key={man.id} man={man} />)}
          {!men.length && <Empty>No data in list.</Empty>}
        </List>
      </Wrapper>
    );
  }
}

Comments

[Ken Jee]

Изменил код с учетом с учетом ваших советов, но получил ошибку в хэлпере о не определенном props в методе moreMen...

TypeError: Cannot read property 'props' of undefined

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

import { add as addMan } from './../actions/men';

class ActionsReducers extends React.Component {

    componentWillMount() {

        console.log( 'ActionsReducers.componentWillMount' );

        this.props.addMan( { name: 'Альберт', family: 'Эйнштейн' } );

    }

    moreMen() {

        console.log( 'ActionsReducers.moreMen' );

        this.props.addMan( { name: 'Томас', family: 'Эдисон' } );

    }

    render() {

        console.log( this.props.men );

        return (
            <div>
                <main>
                    <h1>Действия и редьюсеры</h1>
                    <div>
                        <div className='pure-g'>
                            <div className="pure-u-1-2">
                                <h2>Люди</h2>
                                <button onClick={this.moreMen}>Еще</button>
                            </div>
                            <div className="pure-u-1-2">
                                <h2>Животные</h2>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        );
    }

}

function mapStateToProps( store ) {

    return {
        men: store.men,
    }

}

const mapDispatchToProps = {

    addMan

};

export default connect( mapStateToProps, mapDispatchToProps )( ActionsReducers );

[Антон Спирин]

Макс Мачез, у меня в примере хандлер написан в виде inline arrow function, а у вас нет.
Исправьте:

class ActionsReducers extends React.Component {
  moreMen() {
    console.log( 'ActionsReducers.moreMen' );
    this.props.addMan( { name: 'Томас', family: 'Эдисон' } );
  }
}

на:

class ActionsReducers extends React.Component {
  moreMen = () => {
    console.log( 'ActionsReducers.moreMen' );
    this.props.addMan( { name: 'Томас', family: 'Эдисон' } );
  };
}

По-хорошему ваша функция должна называться addManBtnClickHandler или handleAddManBtnClick

[Ken Jee]

Антон Спирин, по поводу именования функций - оно и понятно, Вы правы, я просто пока изучаю решил не заморачиваться. Но наверное надо сразу бы это использовать.

Переписал код, с учетом новых советов. Клик по кнопке отрабатывает и данные в Store пишутся. Но вот например метод render после записи в хранилище не выполняется.

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

import { add as addMan } from './../actions/men';

class ActionsReducers extends React.Component {

    componentWillMount() {

        console.log( 'ActionsReducers.componentWillMount' );

        this.props.addMan( { name: 'Альберт', family: 'Эйнштейн' } );

    }

    shouldComponentUpdate( nextProps, nextState ) {

        console.log( 'ActionsReducers.shouldComponentUpdate' );

        console.log( nextProps, nextState );

    }

    componentWillReceiveProps( nextProps ) {

        console.log( 'ActionsReducers.componentWillReceiveProps' );

        console.log( nextProps );

    }

    moreMen = () => {

        console.log( 'ActionsReducers.moreMen' );

        this.props.addMan( { name: 'Томас', family: 'Эдисон' } );

    }

    render() {

        console.log( 'ActionsReducers.render' );

        console.log( this.props.men );

        return (
            <div>
                <main>
                    <h1>Действия и редьюсеры</h1>
                    <div>
                        <div className='pure-g'>
                            <div className="pure-u-1-2">
                                <h2>Люди</h2>
                                <button onClick={this.moreMen}>Еще</button>
                            </div>
                            <div className="pure-u-1-2">
                                <h2>Животные</h2>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        );
    }

}

function mapStateToProps( store ) {

    return {
        men: store.men,
    }

}

const mapDispatchToProps = {

    addMan

};

export default connect( mapStateToProps, mapDispatchToProps )( ActionsReducers );

[Антон Спирин]

Макс Мачез, значит reducer у вас мутирует старый массив, вместо того чтобы возвращать новый. Пришлите его код и скажу точно. Данные в store должны обновляться иммутабельно.

Иммутабельное расширение массива man и иммутабельное удаление элемента можно организовать так:

const ADD_MAN = 'ADD_MAN';
const REMOVE_MAN = 'REMOVE_MAN';

const initialState = [];

const manReducer = (state = initialState, action) {
  const { type, payload } = action;

  switch(type) {
    case ADD_MAN:
      return [...state, payload];

    case REMOVE_MAN:
      return [...state.filter(man => man.id !== payload)];

    default:
      return state;
  }
}

Тут в примере на удаление используется id, это только для примера, как можно найти уникальный элемент в массиве и вернуть новый массив без него.

[Ken Jee]

Антон Спирин, да, вот код...

Экшн

export const ADD_MAN = 'ADD_MAN';

export function add( man ) {

    return { type: ADD_MAN, man }

}

Редюсер

import { combineReducers } from 'redux';

import { ADD_MAN } from "../actions/men";

const initialState = {

    men: []

};

function menApp( state = initialState, action ) {

    switch ( action.type ) {

        case ADD_MAN:

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

        default:

            return state;
    }

};

const menReducers = combineReducers( { menApp } );

export default menReducers;

[Антон Спирин]

Макс Мачез, во-первых для полезной нагрузки принято использовать ключ payload:

export const ADD_MAN = 'ADD_MAN';
export const add = man => ({ type: ADD_MAN, payload: man });

во-вторых, вы разбираете спредом вашу сущность man и передаете ee составляющие в массив:
return [ ...state, ...action.man ];
выполнение, по идее, завершается ошибкой:
Uncaught TypeError: action.man is not iterable
естественно, ничего не обновляется.

Исправьте на:
return [ ...state, action.man ];
а по-хорошему на:
return [ ...state, action.payload ];

[Антон Спирин]

Макс Мачез, вы создали такую иерархию store:

{
  menReducers: {
    manApp: [],
  },
  animalReducers: {
    animalApp: [],
  }
}

а пытаетесь замапить так :

function mapStateToProps( store ) {
    return {
        men: store.men
    }
}

при этом получая undefined в this.props.men в компоненте.

Переписав:

function mapStateToProps( state ) {
    return {
        men: state.menReducers.menApp,
    }
}

все заработает.

Но я вам рекомендую упростить структуру store.

Ваш файл menReducers, пока там один редьюсер, combineReducers использовать не надо:

import { ADD_MAN } from "../actions/men";

export default function menReducer( state = [], action ) {
    switch ( action.type ) {
        case ADD_MAN:
            return [ ...state, action.payload ];

        default:
            return state;
    }
};

в initialState была ошибка. массив был обернут в объект, а разбирался в редьюсере как массив.

В App:

import menReducer from './../reducers/men';
import animalsReducer from './../reducers/animals';

let store = createStore( combineReducers( { men: menReducer, animals: animalsReducer } ) );

тогда в объект можно передавать:

function mapStateToProps( state ) {
    return {
        men: state.men,
    }
}

обратите внимание, что первый аргумент mapStateToProps принято называть state, а не store

[Ken Jee]

Антон Спирин, ниже привожу свежий код с трейсом в консоле.

Для отслеживания Стора использую подписку на его изменения в файле роутинга:

let unsubscribe = store.subscribe( () => console.log( store.getState() ) );

Ниже код:

Точка входа index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/app';

ReactDOM.render( <App />, document.getElementById("app") );

Роутинг routes.js

import React from 'react';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

import Header from './header';
import Footer from './footer';

import Home from './home';
import About from './about';
import NotFound from './not-found';
import EDElements from './e-d-elements';
import ActionsReducers from './actions-reducers';

import menReducers from './../reducers/men';
import animalsReducers from './../reducers/animals';

let store = createStore( combineReducers( { menReducers, animalsReducers } ) );

let unsubscribe = store.subscribe( () => console.log( store.getState() ) );

export default (props) => (
    <div>
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <Header/>
                    <div className="content">
                        <div className='pure-g'>
                            <div className="pure-u-1-5">
                                <nav>
                                    <ul>
                                        <li><Link to="/e-d-elements">Включение и выключение элементов</Link></li>
                                        <li><Link to="/actions-reducers">События и редьюсеры</Link></li>
                                    </ul>
                                </nav>
                            </div>
                            <div className="pure-u-4-5">
                                <Switch>
                                    <Route exact path='/' component={ Home } />
                                    <Route path='/about' component={ About } />
                                    <Route path='/e-d-elements' component={ EDElements } />
                                    <Route path='/actions-reducers' component={ ActionsReducers } />
                                    <Route component={ NotFound } />
                                </Switch>
                            </div>
                        </div>
                    </div>
                    <Footer/>
                </div>
            </BrowserRouter>
        </Provider>
    </div>
);

Экшн actions/men.js

export const ADD_MAN = 'ADD_MAN';

export const add = ( man ) => {

    return { type: ADD_MAN, payload: man }

}

Редюсер reducers/men.js

import { combineReducers } from 'redux';

import { ADD_MAN } from "../actions/men";

const initialState = {

    men: []

};

function menApp( state = initialState, action ) {

    switch ( action.type ) {

        case ADD_MAN:

            let newState = Object.assign( {}, { men: [ ...state.men, action.payload ] } );

            console.log( 'New state in reducers/men.js -> menApp()' );
            console.log( newState );

            return newState;

        default:

            return state;
    }

};

const menReducers = combineReducers( { menApp } );

export default menReducers;

Сам компонент ActionsReducers

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

import { add as addMan } from './../actions/men';

class ActionsReducers extends React.Component {

    // componentWillMount() {
    //
    //     console.log( 'ActionsReducers.componentWillMount' );
    //
    //     this.props.addMan( { name: 'Альберт', family: 'Эйнштейн' } );
    //
    // }
    //
    // shouldComponentUpdate( nextProps, nextState ) {
    //
    //     console.log( 'ActionsReducers.shouldComponentUpdate' );
    //
    //     console.log( nextProps, nextState );
    //
    // }
    //
    // componentWillReceiveProps( nextProps ) {
    //
    //     console.log( 'ActionsReducers.componentWillReceiveProps' );
    //
    //     console.log( nextProps );
    //
    // }

    moreMen() {

        console.log( 'ActionsReducers.moreMen' );

        this.props.addMan( { name: 'Томас', family: 'Эдисон' } );

    }

    render() {

        console.log( 'ActionsReducers.render' );

        // console.log( this.props.men );

        return (
            <div>
                <main>
                    <h1>Действия и редьюсеры</h1>
                    <div>
                        <div className='pure-g'>
                            <div className="pure-u-1-2">
                                <h2>Люди</h2>
                                <button onClick={() => this.moreMen()}>Еще</button>
                            </div>
                            <div className="pure-u-1-2">
                                <h2>Животные</h2>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        );
    }

}

function mapStateToProps( store ) {

    return {

        men: store.men

    }

}

const mapDispatchToProps = {

    addMan

};

export default connect( mapStateToProps, mapDispatchToProps )( ActionsReducers );

На картинке ниже видно, что рендер происходит 1 раз, когда компонент отрисовывается первый раз. Далее следуют 2 клика по кнопне moreMen, данные в стор улетают и там фиксируются. Но повторный рендер компонента не происходит. Почему-то

[Антон Спирин]

Макс Мачез, прочитайте мой комментарий выше. Я, думаю, все вопросы отпадут. Советую установить в браузер redux-dev-tools и добавить его поддержку в проект.

[Ken Jee]

Антон Спирин, получилось! Спасибо большое!