javascript - 使用模态和排序重新选择

Question

我开始使用reselect在我的 React Native 项目中。我正在寻找一种与 derived data 合作的方式在处理大量联系人的 redux 应用程序中。

我在排序时遇到问题。我的主要联系人列表按名为“delta”的数字字段排序:

const contactsSelector = state => state.contacts

const sortedContactsSelector = createSelector(
    contactsSelector,
    contacts => contacts.sort(function (a, b) {return a.delta - b.delta})
)

const mapStateToProps = (state, ownProps) => {
    return {
        contacts: sortedContactsSelector(state)
    }
}

它有效。

但是，当我呈现一个带有按联系人姓名排序的列表的模式时:

const contactsSelector = state => state.contacts

const sortedContactsSelector = createSelector(
    contactsSelector,
    contacts => contacts.sort(function (a, b) {
        if (a.name < b.name)
            return -1;
        if (a.name > b.name)
            return 1;
        return 0;
    })
)

const mapStateToProps = (state, ownProps) => {

    return {
        contacts: sortedContactsSelector(state)
    }
}

并关闭模式 - 原始主联系人屏幕按名称排序(作为模式)。

有办法解决这个问题吗？

这里的最佳实践是克隆:

const contactsSelector = state => state.contacts

const sortedContactsSelector = createSelector(
    contactsSelector,
    contacts => clone(contacts).sort(function (a, b) {
        if (a.name < b.name)
            return -1;
        if (a.name > b.name)
            return 1;
        return 0;
    })
)

Answer 1

您遇到了由 Array.prototype.sort() 导致原始数组发生突变的状态突变问题。

据我所知，您的选择器直接从状态获取联系人数组，对其进行变异并将其传递给您的组件，从而导致您的列表以及连接到选择器的任何其他组件出现意外行为。

所以，是的，正如你所说，你应该每次都克隆你的数组。并且永远不要改变(当然)或更新选择器中的状态。选择器应该是只读的。

更新

reselect 将帮助您缓存结果数组，因为原始 state.contacts 保持不变。