组件无法赶上 redux 状态

Question

请帮我解决这个问题。我使用 redux 和 react-redux 来控制我的应用程序中的状态。但是，当我尝试根据 redux 存储中的值更改组件中的样式时，它会延迟响应。当我添加新项目并单击列表并期望它的颜色被改变时，它只会在我添加另一个项目后才这样做，所以它总是延迟。这是我的减速机

export const items = (state = [], action) => {
switch(action.type) {
    case 'ADD_ITEM':
        const newItem = {
            title: action.title,
            id: action.id,
            selected: action.selected,
            comments: action.comments
        };
        return [
            ...state,
            newItem
        ];
    case 'REMOVE_ITEM':
        return state.filter(({ id }) => id !== action.id);
    case 'SELECT_ITEM':
        state.map((item) => {
            if (item.id === action.id) {
                return [
                    ...state,
                    item.selected = true
                ];
            } else {
                return [
                    ...state,
                    item.selected = false
                ];
            }
        });
    default:
        return state;
}
};

这是我的组件，我想对 redux store 的每次更改做出反应

import React from 'react';
import { connect } from 'react-redux';
import { removeItem, selectItem } from '../actions/items';
import { Badge, ListGroup, ListGroupItem, Button } from 'reactstrap';

const stylesForActiveItem = {
    borderLeft: '4px solid red',
    transition: 'all .5s',
    marginLeft: '-4px',
    borderRadius: '0'
}

class Item extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { removeItem, selectItem, id, title, selected } = this.props;
        return (
            <ListGroup className="Item">
                <ListGroupItem 
                    onClick={() => selectItem({ id })}
                    className={selected ? 'Item__text active-item' : 
'Item__text'}
                >{title} <Badge className="Item__badge">14</Badge>
            </ListGroupItem>
            <Button className="Item__btn" onClick={() => removeItem({ id 
})}>Delete</Button>
        </ListGroup>
    );
}
}

const mapDispatchToProps = (dispatch) => ({
removeItem: (id) => dispatch(removeItem(id)),
selectItem: (id) => dispatch(selectItem(id))
})

export default connect(null, mapDispatchToProps)(Item);

Answer 1

  state.map((item) => {
            if (item.id === action.id) {
                return [
                    ...state,
                    item.selected = true
                ];
            } else {
                return [
                    ...state,
                    item.selected = false
                ];
            }
        });

//I guess you need to do something like this



state.map((item) => {
            if (item.id === action.id) {
                return {...item, selected:true}

            } else {
                return {...item, selected:false}

            }
        });

因为即使映射 returns 新数组，内部对象也不应该发生变异。这就是为什么我们在里面传播并创建一个新的项目对象。无需在具有整个状态的地图中再次创建数组。那只会改变你的状态结构，而不仅仅是改变一个布尔值。

组件无法赶上 redux 状态

Component can't catch up with redux state

javascript

reducers

reactjs

redux

react-redux