Question

我正在尝试将我的应用程序（天气检查应用程序）从标准React状态方法重写为基于Redux的应用程序。我在更改状态时遇到问题。在纯React中，通过对此this.setState（）进行放宽，我仅更改了我在此方法中作为参数传递的片段。在Redux中，即使我仅传递整个状态的一部分，它似乎也会更改整个状态对象，但可能我做错了事。

在这里您可以看到当我触发动作时状态如何转变：

在我的示例中，我试图在单击按钮时设置坐标状态（纬度和经度）。尝试了几件事-我认为在reducer函数中传递state = []可以清除整个状态，但是当应用程序崩溃时，我无法摆脱它。

我有3个减速器：第一个用于地理位置坐标，第二个用于天气细节，最后一个用于处理是否显示加载微调器

const reducers = combineReducers({
    weather: weatherReducer,
    coords: coordsReducer,
    loading: loadingReducer
})

然后我存储的初始状态如下：

const store = createStore(reducers, {
    weather: [{ temperature: "", humidity: "", windSpeed: "", pressure: "", pollution: "", date: "" }],
    coords: { lat: null, lng: null },
    loading: { loading: false }
}, allStoreEnhancers);

不确定将它们分成三部分是否很好，但我相信是这样（如果我错了，请指出）

coordsReducer.js：

export default function weatherReducer(state = [], { type, payload }) {
    switch (type) {
        case 'updateCoords':
            return payload
        case 'clearCoords':
            return payload
        default:
            return state
    }
}

和coordsActions.js（只需设置坐标或将其清除即可）

export function updateCoords(lat = 0, lng = 0) {
    return {
        type: 'updateCoords',
        payload: {
            lat: lat,
            lng: lng
        }
    }
}

export function clearCoords() {
    return {
        type: 'clearCoords',
        payload: {
            lat: null,
            lng: null
        }
    }
}

基本上我需要一些东西： 1.认为我将状态，行动和减速器分开的方式是否有意义 2.如何更改单个属性的状态而不是更改整个状态对象？

Answer 1

这是因为在设置新属性时必须传递以前的状态。您可以使用点差运算符轻松完成此操作。

export default function weatherReducer(state = [], { type, payload }) {
    switch (type) {
        case 'updateCoords':
           return {
            ...state,
            lat: payload.lat,
            lng: payload. lng
         }
        case 'clearCoords':
            return {
             ...state,
            lat: null,
            lng: null
         }
        default:
            return state
    }
}

，您可以设置要单独更新的值。

动作会更改所有值的状态，而不仅仅是特定值

1 个答案: