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;

索引.js

import { 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, {&nbsp; &nbsp;foo: action.payload !== "SET_FOO" ? state.foo : action.payload});一个更好的方法，你会经常看到：export default (state = {}, { type, payload }) => {&nbsp; switch (type) {&nbsp; &nbsp; case 'SET_FOO': {&nbsp; &nbsp; &nbsp; return { ...state, payload }&nbsp; &nbsp; }&nbsp; &nbsp; default: {&nbsp; &nbsp; &nbsp; return state&nbsp; &nbsp; }&nbsp; }}在最后一个示例中，您可以清楚地看到我正在返回一个新对象，其中包含状态所具有的所有属性以及新的有效负载。祝你好运！