React native 및 redux가 작동하지 않음

Question

reactx-native 앱에 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> 

모든 것이 잘 작동 :

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 내가이이

store.js : 이 코드입니다 componentDidMount. 문제는 구성 요소에서 작업을 실행하면 상태가 저장되지 않기 때문에 응용 프로그램을 다시 시작하면 상태가 사라집니다. 나는 단지 액션을 호출하고 데이터를 전달한다 무엇

:

this.props.onSetAuthData(data.credentials); 

상태는 내가 콘솔에서 볼 수있는 업데이트,하지만 난 단지 상태 응용 프로그램을 다시 시작하면 의해 생성된다 App.js의 동작이 저장되지 않습니다.

아마도 RootNav 구성 요소와 관련이 있습니까?

어쩌면 나는 reducers를 잘못 내보내고 있습니까? 나는 const user = (state = initialState, action = {}) => {} 기본 사용자를 내 보냅니다. 다른 감속기와 같습니다. const auth = (state = initialState, action = {}) => {} 기본 인증을 내 보냅니다.

가 그럼 난 combineReducers와 수출 ({인증, 사용자})

이 잘못인가?

Answer 1

Reacttotron과 같은 도구를 사용하여 상점이 지속되는지 여부를 확인하십시오. 이미 앱 시작에 재수 가게 될 때까지 기다려야하는 구성 요소를 지속 있다면

https://github.com/infinitered/reactotron

. 경우에 따라 persistgate을 사용하여 redux persist를 사용하여 지속 된 저장소가 다시 수화 될 때까지 기다릴 수 없습니다. 그래서 가게와 persistor를 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';