Redux Dispatch - 从数组/不正确的数组长度输出中删除项目

Posted 2021-05-05

我在Redux中有一个动作，它只是删除3个项目的硬编码数组中的最后一项。

它工作正常，但我有第二个属性（dataLength），它计算数组的长度。当我调度我的动作时，我想从数组中删除最后一项，同时同时更新数组长度。

发生的事情是项目被删除数组但长度（dataLength）不会更新，直到我再次发送操作。

所以我有两个问题：

1. 我的dataLength属性设置为null，是否可以在初始状态下获取数组的长度？
2. 第一次发送后如何立即更新数据长度属性？

谢谢

减速器

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);

答案

在reducer中，您没有正确更新长度，因为它是根据当前状态列表而不是筛选列表确定的

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;
    }
}

另一答案

你应该归还：

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

原因是当您使用state.data.length时，您仍在访问旧的状态值