React native 和 redux 仍然无法正常工作
我正在使用 redux-persist 将数据存储在我的 react-native 应用程序中。 这是代码：
store.js
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import {
persistStore,
persistCombineReducers,
} from 'redux-persist';
import { AsyncStorage } from 'react-native';
import { composeWithDevTools } from 'redux-devtools-extension';
import user from './reducers/user';
import auth from './reducers/auth';
const config = {
key: 'root',
storage: AsyncStorage,
};
const reducers = persistCombineReducers(config, {
user,
auth
});
export const configureStore = () => {
const store = createStore(
reducers,
compose(
applyMiddleware(thunk),
)
);
const persistor = persistStore(store);
return { persistor, store };
};
然后在 App.js 中我有这个：
const { persistor, store } = configureStore();
const onBeforeLift = () => {
// take some action before the gate lifts
store.dispatch(startingApp());
}
return (
<Provider store={store}>
<PersistGate
loading={<HomeLoader />}
onBeforeLift={onBeforeLift}
persistor={persistor}>
<RootNav />
</PersistGate>
</Provider>
当我从 App.js componentDidMount 调度和操作时，一切都正常。 问题是，当我从组件触发操作时，状态不会被存储，因此当我重新启动应用程序时，状态就会消失。
我所做的只是调用操作并传递数据：
this.props.onSetAuthData(data.credentials);
正如我在控制台中看到的那样，状态已更新，但如果我重新启动应用程序，则只会保存 App.js 中操作创建的状态，而不会保存
也许这与 RootNav 组件有关？
也许我导出了错误的 Reducer？ 我有 const user = (state = initialState, action = {}) => {} export default user。 其他 Reducer 也一样： const auth = (state = initialState, action = {}) => {} 导出默认身份验证。
然后我使用 CombineReducers({auth, user}) 导出
这有错吗？
使用 Reacttotron 等工具查看您的商店是否已持久化。
https://github.com/infinitered/reactotron
如果它已经持久化，您的组件应该等到商店在应用启动时重新水化。有时我无法使用 redux persist 使用
persistgate
等待持久存储重新水化。因此，我在
async componentWillMount
上将存储和持久器设置为状态，然后在渲染中检查存储是否不为空（null）并且已经重新水化，然后加载您的应用程序。
constructor(){
super();
this.state = {store: null, persistor: null}
}
async componentWillMount () {
const store = configureStore();
this.setState({ store: store.store })
this.setState({ persistor: store.persistor })
}
render(){
return (
if (this.state.store === null) {
return (
<View>
<Text>Loading...</Text>
</View>
);
}
<Provider store={this.state.store} persistor={this.state.persistor}>
<RootNav />
</Provider>
还尝试将您的存储从
AsyncStorage
更改为
storage
。
const config = {
key: 'root',
storage,
};
首先导入存储
import storage from 'redux-persist/es/storage';
有时它会使用 persistConfig 中的键调用错误。尝试键：' primary '
const primary = {
key: 'root',
storage: AsyncStorage,
blacklist: [],
whitelist: ['user'],
};