React w/ Redux/React-Redux 和 Redux-Persist 仅保留对本地存储的第一个更改

Question

我在使用 React-Redux 和 Redux-Persist.

在 React 中坚持 Redux 时遇到了一些问题

减速器示例：

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;

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 存储中各个对象的第一次更新。

然而...

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

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

现在我相信这与我的对象不可变性有关，Redux 因此没有接受更改，但我尝试更改我的减速器但没有任何运气：

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 的原则是不变性，因此您应该始终 return 一个新状态，相反，你直接改变 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
    }
  }
}

在最后一个示例中，您可以清楚地看到我正在 return创建一个具有状态所具有的所有属性的新对象，以及新的有效载荷。

祝你好运！

React w/ Redux/React-Redux 和 Redux-Persist 仅保留对本地存储的第一个更改

React w/ Redux/React-Redux and Redux-Persist only persisting first change to local storage

javascript

reactjs

redux

react-redux

redux-persist