将自定义对象数组添加到 redux 状态后，未调用我的 mapStateToProps [英] My mapStateToProps is not called after adding custom object array to redux state

问题描述

我尝试了几个小时，但无法弄清楚为什么在添加了自定义对象的数组后没有调用我的状态.

I am trying for few hours but can't figure out why my state is not called after adding an array of custom object.

// In my component...
const myRemoteArray = getRemoteArray() // Is working
props.addAdItems(myRemoteArray) // Calls **1 via component.props
/// ...


const mapDispatchToProps = (dispatch) => {
    return {
        addAdItems: (items) => { // **1
            // Items contains my array of objects 
            dispatch(addAdItems(items)) // Calls **2
        },
    }
}

// My action 
export const addAdItems = (items) => { // **2
    // Items contains my array of objects 
    return { // Calls **3
        type: AD_ITEMS,
        adItems: items,
    }
}

const productsReducer = (state = initialState, action) => {
    switch (action.type) { // **3
        case AD_ITEMS:
            // Is working! 
            // action.adItems contains my array!
            const _state = {
                ...state,
                adItems: action.adItems, // Here is the issue, I am not sure how to add my NEW array to existing state and update it. 
                                         // Like that: ??? "adItems: ...action.adItems" or adItems: [action.adItems]
            }

            // The new state contains my Array!!!
            return _state

        default:
            return state
    }
}

// In my component... !!!!
// THIS IS NOT CALLED or it is called with empty array from initialState!!!
const mapStateToProps = (state) => { 
    return {
        updatedItem: state.changedItem,
        adItems: state.adItems,
    }
}

在我看来，Redux 的包含以下数据的数组有问题.我的类方法有 Redux 问题吗?

It seems to me that Redux is having a problem with my array containing the following data. Has Redux issues with my class methods?

class Ad {
    constructor(
        id,
        isPublished
    ) {
        this.id = id
        this.isPublished = isPublished
    }

    someMessage = () => { return "Help me!" }
    needHelp = () => { return true }
}

我的 Redux 已经在处理其他调用、数据和对象了，这意味着我的 createStore 和所有其他东西都是正确的.

My Redux is working already with other calls, data, and objects, which means my createStore and all other stuff is correct.

PS:我没有多个商店.

更新现在我的 mapDispatchToProps 被当前数组调用但没有持久化.

UPDATE Now my mapDispatchToProps is called with current array but is not persisting.

更新 2如果我保存我的文件并强制刷新应用程序，props.adItems contains 我加载的数组，但如果我想访问 props.adItems 在运行时(例如在 FlatList 刷新时)它又是空数组！

UPDATE 2 If I save my file and force to refresh the App, the props.adItems contains my loaded array, but if I want to access props.adItems at runtime (e.g. on FlatList refresh) it is empty array again!

为什么?在通过 useEffect 更改数组后，我是否应该将其存储在 useState 属性中?

Why? Should I store my array in a useState property after it has changes via useEffect?

推荐答案

您在 reducer 中添加的注释非常接近，但它们都不是 100% 准确.

You were pretty close in the comments you added in the reducer, but neither of them were 100% accurate.

为了让 Redux 注意到您的数组已更改，您需要新状态的属性 adItems 返回一个全新的数组.你可以这样做:

For Redux to notice that your array has changed, you need the property adItems of your new state to return an entirely new array. You can do it like this:

adItems: [...action.adItems]

使用此代码，您将创建一个新数组，然后将旧数组的项目副本添加到其中.

With this code you'll be creating a new array, and then adding a copy of the items of the old one into it.

您当前的实现 (adItems: action.adItems) 不起作用的原因是 action.adItems 实际上是对内存中数组的引用.即使数组内容发生了变化，action.adItems 的值仍然相同，一个指向数组当前存储位置的指针.这就是你的商店没有被更新的原因:由于 Redux 不检查数组本身的值，而是检查数组存储位置的引用，你返回的新状态正是一样，所以 Redux 不知道有任何变化.

The reason why your current implementation (adItems: action.adItems) is not working is that action.adItems is actually a reference to an array in memory. Even though the array contents have changed, the value of action.adItems is still the same, a pointer to where the array is currently stored. This is the reason why your store is not being updated: as Redux does not check the values of the array itself but the reference to where the array is stored, the new state you're returning is exactly the same, so Redux is not aware of any changes.

这篇关于将自定义对象数组添加到 redux 状态后，未调用我的 mapStateToProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！