Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
Добрый день...
Кто более или менее знаком с redux,может мне объяснить почему такое поведение..
Еть Footer итого...который пересчитывает заказ при изменении суммы и количества.
см видео.
https://cloud.mail.ru/public/NBUq/3QKFaV5Hb
Но если я комментирую код,который избыточен
const mapStateToProps = (state) => {
    //console.log('footer=',state.Contents.orders);
    return {
        orders:state.Contents.orders,
/*
        is_select:state.Contents.orders.filter((row)=>{
            return (row.is_select===1)
        })
*/


    };
};

1.Причем is_select вообще не используется
2.is_select является производной(просто filter причем условие может быть любое типа row.is_select===ысысыцс)
от необходимого state.Contents.orders,

Непонятно поведение в console.log('footer=',state.Contents.orders); видно что Contents.orders приходит правильный.(дальше в коде просто подбивается сумма).
Но без
  is_select:state.Contents.orders.filter((row)=>{
            return (row.is_select===1)
        })

Не перерисовывается.
2 апр 18, 09:37    [21303877]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 26389
irbis_al,

сложно что-то сказать по огрызку кода и не внятным объяснениям
2 апр 18, 10:45    [21304068]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
skyANA
irbis_al,

сложно что-то сказать по огрызку кода и не внятным объяснениям


Ну вот код TotalOrder..Там всё просто обычный Component обвёрнутый в connect
Поэтому его код и не давал.
+

/**
 * Created by shop on 30.03.18.
 */
import React, { Component } from 'react';
import './styles.css';
import { connect } from 'react-redux';
import {format1} from '../../Common/utils';
import {get_sum_row} from '../../Common/utils';

class  TotalOrder extends React.Component {
    constructor(props) {
        super(props);
        this.get_sumorder=this.get_sumorder.bind(this);

    }


    get_sumorder(orderarray){
//let orderarray=this.props.orders;
        let sum=0.0;
        var l = orderarray.length;
        for (var i = 0; i < l; i++) {
            sum=sum+get_sum_row(orderarray[i]);

        }


        return format1(sum,"");
    }
    render() {
let sum=this.get_sumorder(this.props.orders);
//console.log(sum);
        return (
            <div className="summary clearfix">
                <div className="line">
                    <div className="entry total">
                        <span className="labeltotal">
                            Итого: </span> <span className="value">{sum}</span>

                    </div>
                </div>
            </div>
        );
    }

}

const mapStateToProps = (state) => {
    //console.log('footer=',state.Contents.orders);
    return {
        orders:state.Contents.orders,

        is_select:state.Contents.orders.filter((row)=>{
            return (row.is_select===1)
        })


    };
};

const mapDispatchToProps = (dispatch) => {
    return {

    };
};
//export connect(mapStateToProps, mapDispatchToProps)(OrderLines);
export default connect(mapStateToProps, mapDispatchToProps)(TotalOrder);


2 апр 18, 10:49    [21304106]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
stanilar
Member

Откуда: Спб
Сообщений: 771
Наверно потому, что state.Contents.orders - неизменный массив объектов, а state.Contents.orders.filter - функция от внутреннего состоянию объектов.

З.Ы. Какая удивительная тенденция, делать видео вместо обдуманного описания процесса.
2 апр 18, 23:11    [21306701]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
stanilar
Наверно потому, что state.Contents.orders - неизменный массив объектов, а state.Contents.orders.filter - функция от внутреннего состоянию объектов.

З.Ы. Какая удивительная тенденция, делать видео вместо обдуманного описания процесса.


Ну про видео лучше один раз увидеть...это время экономит всем.
А state.Contents.orders изменяется в console log приходит order в котором уже новое поле количество и цена.
В отличие от is_select который всегда []
Я так понимаю раз он подписан на orders то и должен слушаться.
3 апр 18, 08:10    [21306867]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
stanilar
Member

Откуда: Спб
Сообщений: 771
irbis_al
Я так понимаю раз он подписан на orders то и должен слушаться.


Не знаю как конкретно у тебя реализовано хранилище, но если ты не заменяешь объект при изменении свойств объекта, то ничего не должно происходить.

Слушается изменение. Если state.Contents.orders - неизменный массив то рендера не будет, хоть какие поля в объектах меняй. Результат state.Contents.orders.filter - изменяется каждый раз, как меняется что-то внутри объектов массива, а заодно и вызывается рендер.

Видео я три раза просмотрел пока не понял на что обратить внимание. Не говоря уже о сути вопроса. Если бы сам не интересовался реактом, даже бы второй раз просматривать не стал. Видео это конечно круто, но прочесть хорошо сформулированный вопрос - это меньше минуты и один раз.
3 апр 18, 17:32    [21309334]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
stanilar
Member

Откуда: Спб
Сообщений: 771
irbis_al
в console log приходит order в котором уже новое поле количество и цена.


Это ты про ту консоль говоришь, которая в mapStateToProps? Ну и как эта консоль относится к рендеру компонента?
3 апр 18, 17:35    [21309345]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
stanilar
irbis_al
в console log приходит order в котором уже новое поле количество и цена.


Это ты про ту консоль говоришь, которая в mapStateToProps? Ну и как эта консоль относится к рендеру компонента?


Напрямки никак...Но в консоле я вижу ,что изменился один из элемент массива Contents.orders..
Следовательно должен быть рендеринг...я от redux именно этого и ожидаю.
А я ожидаю ,-Меняется состояние и он(redux) толкает рендеринг.
is_select вообще не меняется ,но с ним рендеринг толкается...
Вот я и хочу чтоб мне объяснили поведение
3 апр 18, 19:53    [21309667]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
Вот тут немного мутновато но объясняется
https://stackoverflow.com/questions/39513753/my-redux-state-has-changed-why-doesnt-react-trigger-a-re-render
3 апр 18, 20:23    [21309694]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
stanilar
Member

Откуда: Спб
Сообщений: 771
irbis_al
is_select вообще не меняется ,но с ним рендеринг толкается...


Да как не меняется, если filter всегда новый массив возвращает!
3 апр 18, 21:11    [21309786]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1480
stanilar
irbis_al
is_select вообще не меняется ,но с ним рендеринг толкается...


Да как не меняется, если filter всегда новый массив возвращает!


Ну в принципе в той статье так и объясняется...
Что map filter reduce форсированно меняет.
Для redux всё равно
Contents.orders :array[{...}{...}{...}{...}] и Contents.orders :array[{...}{...}{...}{...чуть другое}]...А вот если количество items поменялось бы
Contents.orders :array[{...}{...}](стало 2 против 4) тогда бы сработало.

Надо будет поэкспериментировать.
3 апр 18, 21:35    [21309832]     Ответить | Цитировать Сообщить модератору
 Re: React Redux Объясните Поведение  [new]
stanilar
Member

Откуда: Спб
Сообщений: 771
irbis_al
...чуть другое


Два разных объекта не могут быть чуть-чуть другими, даже если у них одинаковое внутреннее содержание. Это принципиально два разных объекта.

А вот массив из двух объектов это один и тот-же массив, как бы ты не менял содержимое его объектов.
3 апр 18, 22:15    [21309910]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить