React nativeとreduxは機能しません。

Question

私はreactx-persistにデータを格納するためにredux-persistを使用しています。 これはコードです：私は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> 

すべてが正常に動作します：

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に私はこれを持っていますcomponentDidMount。 問題は、たとえばコンポーネントからアクションを起動すると状態が保存されないため、アプリケーションを再起動すると状態がなくなるということです。私はちょうどアクションを呼び出すと、データを渡しているん何

：

this.props.onSetAuthData(data.credentials); 

状態は、私は、コンソールで見ることができるように更新が、私は、唯一の状態のアプリを再起動する場合によって作成されますApp.js内のアクションは保存されています。

これはRootNavコンポーネントと関係がありますか？

おそらく私は間違ったレデューサーを輸出していますか？ 私は constユーザー=（状態= initialState、アクション= {}）=> {} デフォルトユーザーをエクスポートします。 他のレデューサーと同じです： const auth =（state = initialState、action = {}）=> {} デフォルトの認証をエクスポートします。

その後、私は combineReducers（{認証、ユーザー}）

でエクスポートするには、この間違ってますか？

Answer 1

Reacttotronのようなツールを使用して、店舗が維持されているかどうかを確認してください。すでにアプリの起動時に再水和した店舗まで待つ必要があるコンポーネントを持続するかどう

https://github.com/infinitered/reactotron

。場合によっては、persistgateを使ってredux persistを使用して、永続化されたストアを再水和するのを待つことができません。だから私はasync componentWillMountの状態にストアとpersistorを設定し、あなたのレンダリングで、ストアが空ではない（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> 

またstorageにAsyncStorageからストレージを変更してみてください。

const config = { 
    key: 'root', 
    storage, 
}; 

まずインポートストレージ実際import storage from 'redux-persist/es/storage';