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

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

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

PS: I don't have multiple stores.

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

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!

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

回答1:

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

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.

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.

来源：https://stackoverflow.com/questions/66082400/my-mapstatetoprops-is-not-called-after-adding-custom-object-array-to-redux-state

标签

javascript

reactjs

react-native

redux

react-redux