react-native - Redux-persist 没有更新状态
问题描述
我是 React Native 和 Redux 的新手。目前我正在使用 Expo 进行一个项目,我想将一些“笔记”存储到 Redux 存储中并保存在 AysncStorage 中。
我的 store.js:
import thunk from 'redux-thunk';
import {eventReducer,appReducer, noteReducer} from './reducers';
import { persistStore, persistReducer,autoMergeLevel2,hardSet } from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage';
const notePersistConfig = {
key: 'note',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,
timeout:null
}
const rootReducer = combineReducers({
events:eventReducer,
app:appReducer,
note: persistReducer(notePersistConfig, noteReducer),
//note:noteReducer
});
export const store = createStore(rootReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);
我的 app.js
import { store, persistor} from './redux/store';
import { PersistGate } from 'redux-persist/integration/react'
...
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<NavigationContainer theme={MyTheme}>
<Drawer.Navigator drawerPosition="right">
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
</PersistGate>
</Provider>
);
...
如果我不使用persistReducer(即普通的note:noteReducer),我可以更新状态并在我的应用程序中反映新的价值。但是在应用了 persistReducer 之后,它似乎根本不会更新状态。
我从 reducer 返回的状态正在产生正确的结果:
export const noteReducer = (state=noteInitialState, action)=>{
console.log("noteReducer",action)
console.log("note State is",state)
switch (action.type) {
case 'SET_NOTE':
var new_state = state
new_state[action.payload.date] = {...new_state[action.payload.date],note:action.payload.note}
console.log("here.... save note?",new_state)
return new_state;
default:
return state
}
}
我试图添加一个注释“里面是什么”,reducer 产生了以下内容:
noteReducer Object {
"payload": Object {
"date": "2021-06-28",
"note": "What is inside",
},
"type": "SET_NOTE",
}
note State is Object {}
here.... save note? Object {
"2021-06-28": Object {
"note": "What is inside",
},
}
然后我尝试在同一日期输入“再次保存”,我可以看到状态仍然为空
noteReducer Object {
"payload": Object {
"date": "2021-06-28",
"note": "Save again",
},
"type": "SET_NOTE",
}
note State is Object {}
here.... save note? Object {
"2021-06-28": Object {
"note": "Save again",
},
}
没有任何错误消息,但似乎没有做任何事情。我的代码有问题吗?最近两天一直在尝试这个。非常感谢!
解决方案
我认为您需要根持久化配置并将 rootReducer 作为参数放入 persistReducer(rootPersistConfig, rootReducer)
import thunk from 'redux-thunk';
import {eventReducer,appReducer, noteReducer} from './reducers';
import { persistStore, persistReducer,autoMergeLevel2,hardSet } from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage';
const notePersistConfig = {
key: 'note',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,
timeout:null
}
const rootPersistConfig = {
key: 'root',
storage: AsyncStorage,
}
const rootReducer = combineReducers({
events:eventReducer,
app:appReducer,
note: persistReducer(notePersistConfig, noteReducer),
//note:noteReducer
});
const persistedReducer = persistReducer(rootPersistConfig, rootReducer)
export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);
推荐阅读
- javascript - Vue.js 变量在传递给另一个组件后未定义
- c - 通过双重链接进行冒泡排序
- mysql - 创建一个视图,将多个表和另一个单独的表连接到一个表中
- python - 嗨,我正在尝试为每列制作一个包含大量数据的 DataFrame,但我使用它的代码不起作用
- python - 获取特定行的平均值并将其存储
- javascript - 未捕获的 ReferenceError:未定义 jQuery | 从 HTML 按钮触发 python 脚本 | 谷歌应用引擎
- javascript - 如何生成一个数组,它是两个 json 对象数组之间的差异
- python - 在 tkinter 标签中显示时间
- java - 如何将堆栈数据结构实现为链表?
- python - 如何将字符串剥离为“控球后卫”