Reducer 更新不会触发组件生命周期方法答案

【问题标题】：Reducer update does not trigger component lifecycle methodsReducer 更新不会触发组件生命周期方法
【发布时间】：2019-06-25 18:25:42
【问题描述】：

我是 react-native 的新手，所以请善待。我的减速器正在更新，但我的组件生命周期没有被触发。我在组件中的 mapStateToProps 函数中有一个 console.log()，它为所有商店更新运行，但组件中没有发生任何事情

我的组件片段

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;

【问题讨论】：

How to update a value of a nested object in a reducer?的可能重复
您还需要复制嵌套对象。有关说明，请参阅 Updating Nested Objects 的 Redux 文档。另请注意，您在 reducer 中不必要地复制了您的 state 两次 - 首先是通过 Object.assign，然后在您返回 { ...copy } 时再次复制。
这是 100% 的收集答案！感谢您结束这一整天的噩梦。！！！！

标签： reactjs react-native redux react-redux

【解决方案1】：

对于那些偶然发现这个问题的人，请参阅 Michael Cheng 在 cmets 中的回应。 TLDR：reducer 中的每个嵌套对象都需要复制到新状态中

我的减速器现在看起来像这样......

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

【讨论】：