Question

在我的一个reducer文件中，我最初将我的默认状态设置为如下所示：

export let defaultState = {
    devices: {},
    canBeDeleted: false,
    willBeDeleted: null,

};

当我检查mapStateToProps函数中的状态时，我注意到状态现在看起来像这样：

device:
       canBeDeleted: true
devices: {XXXXXXXXXX: {…}, XXXXXXXXX: {…}}
willBeDeleted: null

当我向设备添加其他参数时，它们会出现。但是，当我删除它们时，它们仍然保留。是什么导致默认状态将canBeDeleted从false更改为true？另外，即使我从代码中删除后，是什么导致其他参数仍然保留？

mapStateToProps看起来像这样

const mapStateToProps = (state) => {
    console.log('mapStateToProps: state', state);
    return {
        devices: state.device.devices,
        canBeDeleted: state.device.canBeDeleted
    }
}

编辑：

这是configureStore：

export default function configureStore(preloadedState) {
    console.log('inside ConfigureStore: preloadedState: ', preloadedState);
    // DEBUG
    if (__DEV__) {
        return createStore(
            rootReducer,
            preloadedState,
            applyMiddleware(
                thunkMiddleware,
                // loggerMiddleware
            )
        )
    }
    return createStore(
        rootReducer,
        preloadedState,
        applyMiddleware(
            thunkMiddleware
            // loggerMiddleware
        )
    )
}

preloadedState在调试器中恢复为未定义状态

完整的reducers文件如下：

import { REHYDRATE } from 'redux-persist/constants'
import _ from 'lodash';
import {
    ADD_DEVICE,
    SYNC_DEVICE,
    DELETE_ALL_DEVICES,
    DELETE_THIS_DEVICE,
    CAN_BE_DELETED,
    HIGHLIGHT_DELETE_ICON,
} from '../actions/device';

// device:Object
// device.macAddress
// device.name
// device.createdAt
// device.updatedAt

export let defaultState = {
    devices: {},
    canBeDeleted: false,
    willBeDeleted: null,

};

export default function (state = defaultState, action) {
    if (action.type === REHYDRATE) {
        let incoming = action.payload.device;
        if (incoming) {
            return {
                ...state,
                ...incoming
            }
        }
        return {
            ...state
        }
    }

    if (action.type === ADD_DEVICE) {
        let device = action.device;
        if (!device || !device.macAddress) {
            return state;
        }
        device.createdAt = new Date();
        device.updatedAt = new Date();
        let devices = _.cloneDeep(state.devices);
        devices[device.macAddress] = device;
        return {
            ...state,
            devices
        }
    }
    if (action.type === SYNC_DEVICE) {
        if (!action.macAddress) {
            return state;
        }
        let devices = state.devices;
        let targetDevice = devices[action.macAddress];
        if (!targetDevice) {
            return state;
        }
        targetDevice.updatedAt = new Date();
        devices[targetDevice.macAddress] = targetDevice;
        return {
            ...state,
            devices
        }
    }
    if (action.type === DELETE_ALL_DEVICES) {
        return {
            ...state,
            devices: {}
        }
    }
    if (action.type === HIGHLIGHT_DELETE_ICON) {
        return {
            ...state,
            canBeDeleted: !state.canBeDeleted
        }
    }
    if (action.type === CAN_BE_DELETED) {
        console.log('reducers/devices.js CANBEDELETED: action and then state', action.deviceItem.props.device.name, state);
        return [
            ...state, {
                canBeDeleted: 'something'
            }
        ]





    }
    if (action.type === DELETE_THIS_DEVICE) {
        // console.log('reducer/device action.type DELETE_THIS_DEVICE', state);
        var listOfDevice = state.devices;
        // console.log('reducer/device action.type delete this device', action);
        // var newObject = listOfDevice.filter(olive => olive.name != action.deviceName)
        // console.log('reducer/device action.type delete this device newObject', newObject);

        function filterByName(obj, stringValue) {
            // console.log('filterByName: new key for object', Object.keys(listOfDevice))
            return Object.keys(obj).reduce((resultObj, key) => {
                const obj = listOfDevice[key]
                // console.log('filterByName: obj', obj);
                if (obj.name !== stringValue) {
                    console.log('here is your resultobj ', resultObj)
                    resultObj[key] = { ...obj }
                }
                return resultObj
            }, {})
        }

        const newObj = filterByName(listOfDevice, action.deviceName);
        // console.log(newObj);

        return {
            ...state,
            devices: newObj,
        }
    }
    return state;
}

Answer 1

我忍不住觉得可能缺少一段更改您的状态的代码。如果您可以发布代码的CodePen示例，则可能有助于调试问题。需要注意的另一件事是您是否在localStorage values

中使用任何持久状态（例如createStore）

在reducer内更改默认状态而没有任何作用

1 个答案: