Как сначала сохранить состояние Redux, прежде чем продолжить? - PullRequest
Новая
       39

Как сначала сохранить состояние Redux, прежде чем продолжить?

0 голосов
/ 01 февраля 2019

У меня есть проект, который использует React-redux и Redux-persist в React Native:

Это зависимости, которые я использовал в основном: "expo": "^ 32.0.0", "реагировать":"16.5.0", "redux": "^ 4.0.1", "response-redux": "^ 5.1.1", "redux-persist": "^ 5.10.0"

Я хочучтобы сделать избыточность, сначала нужно сохранить данные, а затем перейти к другому навигатору.Поэтому я пытался использовать асинхронную функцию и оказалось, что она не работает.Но если я не использую асинхронную функцию, она работает совершенно нормально, НО без навигации.

Зачем тогда использовать асинхронную работу?Поскольку до того, как Redux сохранил мою пользовательскую информацию с сервера, экран уже переместился в другой навигатор, а Redux не удалось сохранить пользовательскую информацию

. Так я называл действия с избыточностью в моем LoginScreen: 

.then((responseJson) => {
        console.log("Server Response: ", responseJson.data)

        this.storeUserInformation(responseJson.data).then(() => {
          this.toggleLoading()
          this.props.navigation.navigate('AppNavigator')
        })   
    })

storeUserInformation = async (userInformation) => {
  await this.props.saveUserInformation(userInformation)
}

const INITIAL_STATE = {
  userAccountInformation: {},
  userExpoToken: {},
}

const reducer = (state = INITIAL_STATE, action) => {

  switch(action.type){
    case USER_LOGIN:
      console.log("UserAccountReducer", "calling USER_LOGIN")
      return { userAccountInformation: action.payload.members }
    case SAVE_USER_INFORMATION:
      console.log("UserAccountReducer", "calling SAVE_USER_INFORMATION")
      return { userAccountInformation: action.payload }
    case USER_LOGOUT:
      console.log("UserAccountReducer", "calling USER_LOGOUT")
      return {state : {}}
    case SAVE_EXPO_TOKEN:
      console.log("UserAccountReducer", "calling SAVE_EXPO_TOKEN")
      return { userExpoToken: action.payload }
    default:
    console.log("UserAccountReducer", "no Action Called")
      return state
  }
}

export default reducer

Без асинхронных действий мои действия могут сохранить информацию с сервера в хранилище с избыточностью.Но поскольку после того, как я вызвал this.props.navigate, действие не завершило процесс сохранения, и оно переместилось на другую страницу, прежде чем оно завершилось

Я хотел бы сначала сохранить избыточность SAVE для данных с сервера,затем после сохранения данных он переходит к следующему экрану

1 Ответ

0 голосов
/ 01 февраля 2019

В вашем редукторе задайте одно начальное состояние, скажем, isDataLoaded, установите его по умолчанию false.

Установите значение от isDataLoaded до true в соответствующем случае редуктора, когда данные поступают из API.

Затем в вашем componentWillReceiveProps или componentDidUpdate отметьте его, если условие 

if(this.props.isDataLoaded){
   // your data is stored now you can do here navigate things
}

не забудьте сопоставить состояние с реквизитом для этого состояния isDataLoaded

...