Question

我正在使用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组件有关吗？

也许我输出错误的减速机？我有 const user =（state = initialState，action = {}）=＆gt; {} 导出默认用户。对于其他减速器也是如此： const auth =（state = initialState，action = {}）=＆gt; {} export default auth。

然后我导出 combineReducers（{auth，user}）

这是错的吗？

Answer 1

使用像Reacttotron这样的工具来查看您的商店是否存在。

https://github.com/infinitered/reactotron

如果它已经存在，那么您的组件应该等到商店在应用启动时重新水化。有时我不能使用dfList <- NULL set.seed(1) for (i in 1:3) { dfList[[i]] <- data.frame(a=sample(letters, 5, rep=T), b=rnorm(5), c=rnorm(5)) } df <- dplyr::bind_rows(dfList, .id = "index")使用redux persist来等待持久存储被重新水化。所以我将商店和persistor设置为persistgate上的状态然后在你的渲染中，检查商店是否为空（null）并且已经重新水化然后加载你的应用程序。

async componentWillMount

还尝试将存储空间从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, };

React native和redux仍然不起作用

1 个答案: