方法1

Question

我已在应用程序中插入redux-persist。在应用程序被杀死后重新启动时，我首先想到的方法是将我的auth令牌放入重新水化的商店中，并检查该令牌是否仍然有效。

我正在努力寻找实现这一目标的良好策略。首先，我将尝试在componentDidMount方法的根App组件中执行此操作。这是我的组件：

export default class App extends React.Component {
  componentDidMount(){
    console.log('in app componentDidmount')
    console.log(store.getState())
    console.log(persistor.getState())
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <Router />
        </PersistGate>
      </Provider>
    );
  }
}

但是store.getState()给了我非水合状态，而persistor.getState()给了我一个不可用的物体：

{ bootstrapped: false, registry: ["root"] }

这也是我的store.js文件：

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
  blacklist: ['error', 'loading', 'backgroundImage'],
};
const pReducer = persistReducer(persistConfig, reducers);

export const store = createStore(pReducer, {}, compose(applyMiddleware(ReduxThunk)));

export const persistor = persistStore(store);

我该如何实现？

Answer 1

方法1

在persistStore的回调中执行此操作：

export const persistor = persistStore(store, null, () => {
  console.log('state', store.getState());
});

方法2

在componentDidMount中嵌套的组件的PersistGate中进行操作：

class Main extends React.Component {
  componentDidMount() {
    console.log(store.getState());
  }
  render() {
    return <Router />;
  }
}

const App = () => (
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <Main />
    </PersistGate>
  </Provider>
);

Answer 2

我在这里为您提供了一个中型文章的链接，该文章准确地解释了您要构建的内容。

目前我无能为力，因为我的代码需要与Redux配合使用，因此我需要更多代码片段。

希望这篇文章对您有所帮助：https://medium.com/@alexmngn/the-essenSharryUptial-boilerplate-to-authSharryUpenticate-users-on-your-react-native-app-f7a8e0e04a42

在应用初始化React Native，Redux-Persist时从持久存储中检索令牌

2 个答案:

方法1

方法2