Обновление редуктора не запускает методы жизненного цикла компонента

Question

Я новичок в реакции-родной, поэтому, пожалуйста, будьте добры. Мой редуктор обновляется, но жизненные циклы компонентов не запускаются. У меня есть console.log () внутри функции mapStateToProps в компоненте, который работает для всех обновлений магазина, но ничего не происходит в компоненте

Фрагмент моего компонента

class CompaniesComponent extends React.Component {
state = {refreshing: false}
static getDerivedStateFromProps (props, state) {
    return {refreshing: props.data.loading};
}
onRefresh =() => {}
render () {
    return (
        <ScrollView bounces={false}  refreshControl={<RefreshControl title="Loading..." refreshing={this.props.data.loading} onRefresh={()=>this.onRefresh()} /> } >
            <Card>
                <CardItem header bordered>
                    <Icon active name="business" />
                    <Text>Companies</Text>
                </CardItem>
                <List>
                    {this.renderComponentItems()}
                </List>
            </Card> 
        </ScrollView>   
    )
}}

const mapStateToProps = (state) => {
console.log("myState", state);
let data = state.api.data[constants.analytics.resources.profile];
console.log(data);
return { data }}


const mapMethodsToProps = {retrieveData, setCompany }

export default connect(mapStateToProps, mapMethodsToProps)(CompaniesComponent);

Мой редуктор

const apiReducer = (state=initialState, action) => {
switch(action.type) {
    case actions.FETCH_DATA: {
        let copy = Object.assign({}, state);
        copy.data[action.payload.resource] = copy.data[action.payload.resource] || {};
        copy.data[action.payload.resource]['loading'] = true;
        return {
            ...copy    
        }
    }
    case actions.FETCH_DATA_FAILURE: {
        let copy = Object.assign({}, state);
        copy.data[action.payload.resource]['loading'] = false;
        copy.data[action.payload.resource]['error'] = action.payload.error;
        return {
            ...copy
        }
    }
    case actions.FETCH_DATA_SUCCESS: {
        let copy = Object.assign({},state);
        copy.data[action.payload.resource]['loading'] = false;
        copy.data[action.payload.resource]['data'] = action.payload.data;
        return {
            ...copy
        }
    }

    case actions.CLEAR_API_DATA: {
        return {
            ...initialState
        }
    }
    default: {
        return state;
    }
}}export default apiReducer;

Answer 1

Для тех, кто сталкивается с этой проблемой, см. Ответ Майкла Чэна в комментариях. TLDR: каждый вложенный объект в редукторе необходимо скопировать в новое состояние

Мой редуктор теперь выглядит так ...

const apiReducer = (state=initialState, action) => {
switch(action.type) {
    case actions.FETCH_DATA: {
        return {
            ...state,
            data: {
                ...state.data,
                [action.payload.resource]: {
                    ...state.data[action.payload.resource],
                    loading: true
                }
            }    
        }
    }
    case actions.FETCH_DATA_FAILURE: {
        return {
            ...state,
            data: {
                ...state.data,
                [action.payload.resource]: {
                    ...state.data[action.payload.resource],
                    loading: false,
                    error: action.payload
                }
            }    
        }
    }
    case actions.FETCH_DATA_SUCCESS: {
        return {
            ...state,
            data: {
                ...state.data,
                [action.payload.resource]: {
                    ...state.data[action.payload.resource],
                    loading: false,
                    data: action.payload
                }
            }    
        }
    }

    case actions.CLEAR_API_DATA: {
        return {
            ...state,
            data: {
                ...state.data,
                [action.payload.resource]: {
                    ...state.data[action.payload.resource],
                    loading: false,
                    data: {}
                }
            }
        } 
    }
    default: {
        return state;
    }
}}