次のコードがあります。
const App = () => {
return (
<Provider store={store}>
<PersistGate persistor={persistor} loading={<Text>Loading!</Text>}>
<ConnectedRootComponent />
</PersistGate>
</Provider>
);
};
export default App;
redux-persist を使用して状態を再水和します。これが完了する前に、loading プロパティにあるものを表示します。私はJestテストを持っています(箱から出してすぐに反応ネイティブに付属するデフォルトのものです):
it('renders without crashing', () => {
const rendered = renderer.create(<App />).toJSON();
console.log("Rendering: " + JSON.stringify(rendered));
expect(rendered).toBeTruthy();
});
しかし、テストはパスしましたが、まだ実行されているアクションとpersist/PERSIST
、persist/REHYDRATE
テストでコンソールに出力された値 (レンダリングされた出力) は次のとおりです。
{
"type": "Text",
"props": {
"accessible": true,
"allowFontScaling": true,
"ellipsizeMode": "tail"
},
"children": ["Loading!"]
}
私がやりたいことは、redux-persist がハイドレーションを完了するまで待ってから、レンダリングされた値を確認することです。これどうやってするの?