React w/ Redux/React-Redux 和 Redux-Persist 仅将第一次

Question

我在坚持Redux使用 ReactReact-Redux和Redux-Persist.减速机示例：export default (state = {}, action) => {    switch (action.type) {      case "SET_FOO":        return action.payload      default:        return state;    }  };动作示例：const setFooAction = (payload) => {    return {      type: "SET_FOO",      payload    }  }  export default setFooAction;索引.jsimport { createStore, combineReducers } from "redux";import { persistStore, persistReducer } from "redux-persist";import storage from "redux-persist/lib/storage";import { PersistGate } from 'redux-persist/integration/react'import fooReducer from "redux/reducers/setFooReducer";const persistConfig = {  key: "root",  storage};const rootReducer = combineReducers({  foo: fooReducer });const persistedReducer = persistReducer(persistConfig, rootReducer);let state = {  foo: {}}let store = createStore(    persistedReducer,     state,     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());let persistor = persistStore(store);ReactDOM.render(  <Provider store={store}>    <PersistGate loading={null} persistor={persistor}>      <App />    </PersistGate>  </Provider>,  document.getElementById("root"));最初，一切正常：应用程序加载初始状态在整个应用程序中设置这会更新 Redux 存储PERSIST火灾，并将其存储在本地存储中。刷新时，从第一次加载数据开始，一切都按预期持续存在。Redux 存储中各种对象的第一次更新。然而...如果我决定在我的对象中添加任何新内容并将它们设置/更新到 Redux 存储中.........刷新时，只有最初保留的内容仍然存在REHYDRATE（如果我正确理解 Redux 事件）。现在我相信这与我的对象不变性和 Redux 没有因此而接受更改有关，但我试图改变我的减速器没有任何运气：

Answer 1

乍一看，一切似乎都很好。

你Object.assign在 reducer 中可能是导致嵌套foo对象的原因，因为 Redux 原则中的一个是不可变的，所以你应该总是返回一个新状态，相反，你直接改变state.

您可以再添加一个第一个参数，以创建一个新对象，该对象将具有新的 foo 的状态属性：

export default (state = {}, action) => Object.assign({}, state, {

   foo: action.payload !== "SET_FOO" ? state.foo : action.payload

});

一个更好的方法，你会经常看到：

export default (state = {}, { type, payload }) => {

  switch (type) {

    case 'SET_FOO': {

      return { ...state, payload }

    }

    default: {

      return state

    }

  }

}

在最后一个示例中，您可以清楚地看到我正在返回一个新对象，其中包含状态所具有的所有属性以及新的有效负载。

祝你好运！