Неожиданное поведение редьюсера redux

@shsv382 · Регистрация: 14.11.2016

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток! Столкнулся с такой проблемой при использовании Redux: при выводе в logger middleware состояние компонентов item ведет себя некорректно:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
action INCREMENT
  prev state 
{items: Array(1)}
items: Array(1)
0: {count: 3, price: 1, value: ƒ}
  action     
{type: "INCREMENT", payload: 0}
  next state 
{items: Array(1)}
items: Array(1)
0: {count: 3, price: 1, value: ƒ}
 
action INCREMENT 
  prev state 
{items: Array(1)}
items: Array(1)
0: {count: 4, price: 1, value: ƒ}
  action     
{type: "INCREMENT", payload: 0}
  next state 
{items: Array(1)}
items: Array(1)
0: {count: 4, price: 1, value: ƒ}

то есть, prevState и nextState совпадают в обоих событиях, хотя события идут друг за другом подряд, и между ними ничто не может изменить state.

По этой причине графа "count" компонента Item не перерисовывается по событию increment (нажатие на плюсик рядом в кол-вом), зато потом при добавлении нового элемента в список (нажатие большого плюсика) происходит и добавление нового элемента, и перерисовка старого.

Вот код редьюсера:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const initialState = {
    items: []
};
 
export const setItemsList = (state=initialState, action={}) => {
    switch(action.type) {
        case "CREATE_ITEM":
            return Object.assign({}, state, {
                items: state.items.concat({
                    count: 1,
                    price: action.payload,
                    value: function() {return this.count * this.price}
                })
            });
        case "INCREMENT":
            let incItems = state.items;
            incItems[action.payload].count += 1;
            return Object.assign({}, state, {
                items: incItems
            });
        case "DECREMENT":
            let decItems = state.items;
            if (decItems[action.payload].count > 1) {
              decItems[action.payload].count -= 1;
            } else if (decItems[action.payload].count <= 1) {
              decItems.splice(action.payload, 1)
            }
            return Object.assign({}, state, {
                items: decItems
            });
        case 'REMOVE_ITEM':
            let newItems = state.items;
            newItems.splice(action.payload, 1);
            return Object.assign({}, state, {
                items: newItems
            });
        default:
            return state;
    }
}

App.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from 'react';
import { connect } from 'react-redux';
 
import './App.css';
import ItemList from "./ItemList";
import * as actions from './actions';
 
 
const mapStateToProps = state => {
  return {
    items: state.items
  }
}
 
const mapDispatchToProps = dispatch => {
  return { 
    onCreateItem: (event) => dispatch(actions.createItem(event)),
    onIncrement:  (event) => dispatch(actions.increment(event)),
    onDecrement:  (event) => dispatch(actions.decrement(event)),
    omRemoveItem: (event) => dispatch(actions.removeItem(event))
  }
}
 
 
class App extends Component {
  constructor(props) {
    super(props);
    this.calculateSum = this.calculateSum.bind(this);
  }
 
  calculateSum() {
    let sum = 0;
    for (let i = 0; i < this.props.items.length; i++) {
      sum += this.props.items[i].value();
    }
    return sum;
  }
 
  componentDidMount() {
 
  }
 
  render() {
    return (
            <table>
              <ItemList items={this.props.items}
                        addCount={this.addCount}
                        removeCount={this.removeCount}
                        increment={this.props.onIncrement}
                        decrement={this.props.onDecrement}
                        removeItem={this.props.onRemoveItem} />
              <tfoot>
                <tr>
                  <td colSpan="2">
                  <input  type="number" 
                          name="price" 
                          min="0"
                          pattern="[0-9]{1,}"
                          placeholder="Enter price" />
                  <span onClick={this.props.onCreateItem}>✚</span>
                  </td>
                  <td id="sum">{this.calculateSum()} руб.</td>
                </tr>
              </tfoot>
            </table>
        
    );
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App);

ItemList.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from 'react';
import Item from './Item.js';
 
class ItemList extends React.Component {
    constructor(props) {
        super(props);
    }
 
    render() {
        let { items, increment, decrement, removeItem } = this.props;
        items = items.map((item, i) => {
            return <Item item={ item }  
                         id={ i }
                         // key={ 'key' + Math.floor(Math.random() * 10000) }
                         increment={increment}
                         decrement={decrement}
                         removeItem={removeItem} />
        });
 
        return (
            <tbody>
                {items} 
            </tbody>
        );
    }
}
 
export default ItemList;

Item.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
 
class Item extends React.Component {
    constructor(props) {
        super(props);
    }
 
    render() {
        return (
                <tr>
                    <td>
                        <span data-elem={this.props.id} onClick={this.props.increment}>+</span>
                        {this.props.item.count} шт.
                        <span data-elem={this.props.id} onClick={this.props.decrement}>-</span>
                    </td>
                    <td>{this.props.item.price} руб.</td>
                    <td className="value">{this.props.item.value()} руб.</td>
                    <td data-elem={this.props.id} onClick={this.props.removeItem}>✖</td>
                </tr>
        )
    }
}
 
export default Item;

actions.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export const createItem = (event) => ({
    type: 'CREATE_ITEM',
    payload: parseInt(event.target.previousSibling.value) && parseInt(event.target.previousSibling.value) > 0 ?
     parseInt(event.target.previousSibling.value) : 1
});
 
export const increment = (event) => ({
    type: 'INCREMENT',
    payload: parseInt(event.target.dataset.elem)
});
 
export const decrement = (event) => ({
    type: 'DECREMENT',
    payload: parseInt(event.target.dataset.elem)
});
 
export const removeItem = (event) => ({
    type: 'REMOVE_ITEM',
    payload: parseInt(event.target.dataset.elem)
});

Рабочая страница проекта - https://shsv382.github.io/buyer_list
Git-репозиторий - https://github.com/shsv382/buyer_list

Всем откликнувшимся огромное спасибо!

@shsv382 · 24.01.2019, 13:05 **[ТС]**

Проблема решена. Возможно, кому-то поможет - в редьюсере вместо:

JavaScript
1
2
3
4
5
6
case "INCREMENT":
            let incItems = state.items;
            incItems[action.payload].count += 1;
            return Object.assign({}, state, {
                items: incItems    // <-- проблема
            });

надо писать вот так (чистейшую функцию =))) ):

JavaScript
1
2
3
4
5
6
case "INCREMENT":
            let incItems = state.items;
            incItems[action.payload].count += 1;
            return Object.assign({}, state, {
                items: [].concat(incItems)   // <-- решение
            });

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .