将数据连接到组件时从 redux 修改数据

Question

redux连接component修改数据是否正常？像这样

redux

const itemInitialState = {
    id: null,
    name: ''
};

反应

const Component = connect(
    state => ({
        items: state.items.map(item => {
            item.selected = true;
            return item;
        })
    })
)(_Component);

我添加了一把原来不在状态的钥匙

Answer 1

如果这是您的意思，它应该不会对性能有任何影响。但是，我建议您将代码移到组件中。 mapStateToProps 应该执行将数据从状态映射到特定组件的道具的唯一功能。通过 props 传入的数据的修改应该留给组件。

Answer 2

我认为在执行 mapStateToProps 时添加字段很好 - 尽管通过更仔细地考虑数据模型可能会解决这样做的需要。

关于您的代码示例，我要解决的问题是不要改变实际的 redux 状态，这可能会导致严重的错误。所以我将其修复为不可变的：

const Component = connect(
    state => ({
        items: state.items.map(item => ({
            ...item,
            selected: true
        }))
    })
)(_Component);

Answer 3

数组的映射函数总是return一个新的引用。我们不应该 return 来自 connect 函数的新引用，因为它会绕过 shouldComponentUpdate Connect 组件 return 在 connect 函数内部处理。每当任何会随着应用程序增长而导致性能影响的操作分派时，都不必总是调用此组件的渲染函数。

新引用必须始终来自 reducer。

所以，在你的组件中设置任何新的属性它或者在 reducer 中设置它。

将数据连接到组件时从 redux 修改数据

Modifying data from redux when connecting it to component

javascript

reactjs

redux

react-redux