无法更改持久化的 redux 状态
Can't change persisted redux state
我正在使用 Redux Persist 来保存应用程序的状态,以便它在关闭和再次打开时是一样的。初始状态已成功保存,但我似乎无法通过操作更新持久状态。我的代码如下:
App.js
import React from "react";
import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import reducers from "./src/reducers";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Router from "./src/Router";
const persistConfig = {
key: "root",
storage,
debug: true
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
const App = () => (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router />
</PersistGate>
</Provider>
);
export default App;
调度减速器
import { strings } from "../../locales/i18n";
import * as types from "../actions/types";
const initialState = strings("schedule.list").map((item, index) => {
return {
key: index.toString(),
title: item.title,
time: item.time,
location: item.location,
description: item.description,
isFavorite: false
};
});
const scheduleReducer = (state = initialState, action) => {
switch (action.type) {
case types.TOGGLE_FAVORITE:
state.map(schedule => {
if (schedule.key === action.id) {
return (schedule.isFavorite = !schedule.isFavorite);
}
});
return state;
default:
return state;
}
};
export default scheduleReducer;
我可以看到 isFavorite
的状态在我调用操作时发生了变化,但在我重新加载应用程序时它并没有持续存在。这可能是什么问题?
map
总是用回调函数的结果创建一个新数组,看看here。在你的减速器中,你正在应用 map
函数,但你没有持有对新数组的任何引用并返回 existing state
,因此 state
没有变化,你的状态是不被坚持。
您可以按如下方式更改您的减速器
const scheduleReducer = (state = initialState, action) => {
switch (action.type) {
case types.TOGGLE_FAVORITE:
cont updatedState = state.map(schedule => {
if (schedule.key === action.id) {
return {
...schedule,
isFavorite: !schedule.isFavorite
};
}
return schedule;
});
return updatedState;
default:
return state;
}
};
希望这会有所帮助!
我正在使用 Redux Persist 来保存应用程序的状态,以便它在关闭和再次打开时是一样的。初始状态已成功保存,但我似乎无法通过操作更新持久状态。我的代码如下:
App.js
import React from "react";
import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import reducers from "./src/reducers";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Router from "./src/Router";
const persistConfig = {
key: "root",
storage,
debug: true
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
const App = () => (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router />
</PersistGate>
</Provider>
);
export default App;
调度减速器
import { strings } from "../../locales/i18n";
import * as types from "../actions/types";
const initialState = strings("schedule.list").map((item, index) => {
return {
key: index.toString(),
title: item.title,
time: item.time,
location: item.location,
description: item.description,
isFavorite: false
};
});
const scheduleReducer = (state = initialState, action) => {
switch (action.type) {
case types.TOGGLE_FAVORITE:
state.map(schedule => {
if (schedule.key === action.id) {
return (schedule.isFavorite = !schedule.isFavorite);
}
});
return state;
default:
return state;
}
};
export default scheduleReducer;
我可以看到 isFavorite
的状态在我调用操作时发生了变化,但在我重新加载应用程序时它并没有持续存在。这可能是什么问题?
map
总是用回调函数的结果创建一个新数组,看看here。在你的减速器中,你正在应用 map
函数,但你没有持有对新数组的任何引用并返回 existing state
,因此 state
没有变化,你的状态是不被坚持。
您可以按如下方式更改您的减速器
const scheduleReducer = (state = initialState, action) => {
switch (action.type) {
case types.TOGGLE_FAVORITE:
cont updatedState = state.map(schedule => {
if (schedule.key === action.id) {
return {
...schedule,
isFavorite: !schedule.isFavorite
};
}
return schedule;
});
return updatedState;
default:
return state;
}
};
希望这会有所帮助!