Question

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

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

发生的事情是将项目从数组中删除，但是长度（dataLength）直到我再次分派动作后才更新。

所以我有两个问题：

我的dataLength属性设置为null，是否可以在初始状态下获取数组的长度？
如何在第一次发送后立即正确更新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

在减速器中，由于当前长度是从当前状态列表而不是过滤列表中确定的，因此您没有正确更新长度

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

Answer 2

您应该返回此：

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

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

Redux派送-从阵列中删除项目/错误的阵列长度输出

2 个答案: