Redux Dispatch - удаление элемента из массива / вывод неверной длины массива

Question

У меня есть действие в Redux и все, что он делает, чтобы удалить последний элемент в жестко заданном массиве из 3 элементов.

Он работает нормально, но у меня есть второе свойство (dataLength), которое вычисляет длинумассив.Когда я отправляю свое действие, я хочу удалить последний элемент из массива и одновременно обновлять длину массива одновременно.

Что происходит, когда элемент удаляется из массива, но длина (dataLength) не 'не обновлять, пока я не отправлю действие снова.

Итак, у меня два вопроса:

1. Моему свойству dataLength присвоено значение null, возможно ли получить длинумассив в начальном состоянии?

2. Как правильно обновить dataLength сразу после первой отправки?

Спасибо

РЕДУКТОР

const initialState = {
    data: [
        {
            id: 0,
            title: 'title 1'
        },
        {
            id: 1,
            title: 'title 2'
        },
        {
            id: 2,
            title: 'title 3'
        }
    ],
    dataLength: null
}

const data = (state = initialState, action) => {
    switch(action.type) {
        case 'DECREMENT_DATA':
            return { ...state, data: state.data.filter((item) => item.id !== action.id), dataLength: state.data.length }
        default:
            return state;
    }
}

export default data;

АКЦИЯ

export function decrement() {
    return {
        type: 'DECREMENT_DATA',
        id: 2
    }
}

КОМПОНЕНТ

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { decrement } from '../actions/decrement';

class Decrement extends Component {
    render() {
        return (
            <button onClick={this.props.decrement}>Decrement -</button>
        );
    }
}

const mapStateToProps = ((state) => {
    return {
        data: state.data
    }
});

const mapDispatchToProps = ((dispatch) => {
    return bindActionCreators({
        decrement
    }, dispatch)
});

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

Answer 1

Вы должны вернуть это:

case 'DECREMENT_DATA':   
    const updatedArray= state.data.filter((item) => item.id !== action.id)   
    return { ...state, data:updatedArray , dataLength: updatedArray.length }

Причина этого в том, что когда вы используете state.data.length, вы все еще получаете доступ к старым значениям состояния

Answer 2

В вашем редукторе вы неправильно обновляете длину, поскольку она определяется из списка текущих состояний, а не из отфильтрованного списка

const data = (state = initialState, action) => {
    switch(action.type) {
        case 'DECREMENT_DATA':
            const newList = state.data.filter((item) => item.id !== action.id)
            return { ...state, data: newList, dataLength: newList.length }
        default:
            return state;
    }
}