javascript - React w/Redux/React-Redux 和 Redux-Persist 仅将第一个更改持久保存到本地存储

Question

我在使用 React-Redux 和 Redux-Persist 在 React 中持久保存 Redux 时遇到了一些问题。

reducer 示例:

export default (state = {}, action) => {
    switch (action.type) {
      case "SET_FOO":
        return action.payload
      default:
        return state;
    }
  };

Action 示例:

const setFooAction = (payload) => {
    return {
      type: "SET_FOO",
      payload
    }
  }
  export default setFooAction;

Index.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")
);

在组件中的用法:

import { connect } from "react-redux";
import setFoo from "redux/actions/setFooAction";

class Main extends Component {        
    //... More Code
    componentDidMount() {
        let foo = this.getFoo() //Gets foo, doesn't really exist but just for context
        this.props.setFoo(foo); //Works fine, all gets set, data is persisted
    }    
    addNewFoo = () => {    
        //Called after functions runs somewhere    
        let newFoo = this.getNewFoo() //Gets newFoo, doesn't really exist but just for context
        foo.push(newFoo)
        this.props.setFoo(foo); //Sets Redux store, on refresh, doesn't persist    
    }
    //...More Code    
}

const mapStateToProps = (state) => ({
  ...state,
});

const mapDispatchToProps = (dispatch) => ({
   setFoo: (payload) => dispatch(setFoo(payload)) 
});

export default connect(mapStateToProps, mapDispatchToProps)(Main);

最初，一切正常:

• 应用程序加载
• 初始状态在整个应用中设置
• 这会更新 Redux 存储
• PERSIST 触发，并将其存储在本地存储中。
• 刷新后，一切都会按照首次加载数据时的预期持续存在。
• Redux 存储区中各个对象的首次更新。

但是...

如果我决定将任何新内容添加到我的对象中并将它们设置/更新到 Redux 存储中...

...刷新时，只有最初保留的内容在 REHYDRATE 期间仍然存在(如果我对 Redux 事件的理解正确的话)。

现在我相信这与我的对象不变性和 Redux 没有因此而改变有关，但我试图改变我的 reducer ，但没有任何运气:

reducer 尝试:

export default (state = {}, action) => Object.assign(state, {
   foo: action.payload !== "SET_FOO" ? state.foo : action.payload
});

我尝试了上面的方法(以及这个方法和我原来的方法的组合，这只是破坏了东西)。这种方法有效，但将我的状态设置如下:

state {
    foo: {
        foo: {
           //Foo data
        }
    }
}

我知道它只是再次分配给foo，因为在reducer中添加了foo:...

...但是，我不确定如何纠正此问题，而又不会在 Redux 中出现潜在错误!

因此，我的谨慎占了上风，我认为最好询问是否有人有任何我可以借鉴的建议或线索!

感谢您提前提供的任何帮助!!!

Answer 1

乍一看一切似乎都很好。

reducer 中的 Object.assign 可能是导致嵌套 foo 对象的原因，因为 Redux 原则中的一个原则是不变性，因此您应该始终返回一个新的相反，您直接改变状态。

您可以再添加一个第一个参数，以创建一个新对象，该对象将具有新 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
    }
  }
}

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

祝你好运!