Как я могу избежать медленного получения состояния из магазина Redux?

Question

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

Итак, на экране входа в систему я отправляю действие по сохранению токена после входа пользователя, и оно сохраняется хорошо

Но проблема заключается в том, что после входа пользователя в систему и go на главном экране "save token Action dispatched" я получил ошибку 401 неавторизованным, и когда я регистрирую токен в функции получения данных, я получаю empty in отладчик, хотя токен сохранения отправлен, ".

Но когда я снова открываю приложение после уничтожения приложения и Go to Home ", потому что я вхожу до этого и сохраняю токен, и я использую redux-persist чтобы сохранить его, чтобы он сохранялся раньше при первом входе в систему " все работает нормально!

Так что я не знаю, что не так Когда вход в систему в первый раз!

вот код главного экрана фрагмент

 constructor(props) {
    super(props);
    this.state = {
      token: this.props.token,
    }
   }


  // Get all playList user created
  getAllPlayLists = async () => {
    const {token} = this.state;
    console.log(token); // After first time I login I got here empty, But after i kill the app or re-open it i got the token well :)
    let AuthStr = `Bearer ${token}`;
    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };

    let response = await API.get('/my_play_list', {headers: headers});
    let {
      data: {
        data: {data},
      },
    } = response;
    this.setState({playlists: data});
  };
  componentDidMount() {
      this.getAllPlayLists();
  }



const mapStateToProps = state => {
  console.log('is??', state.token.token); here's i got the token :\\
  return {
    token: state.token.token,
  };
};

export default connect(mapStateToProps)(Home);

Redux

редукторы

import {SAVE_TOKEN} from '../actions/types';

let initial_state = {
  token: '',
};
const saveTokenReducer = (state = initial_state, action) => {
  const {payload, type} = action;
  switch (type) {
    case SAVE_TOKEN:
      state = {
        ...state,
        token: payload,
      };
      break;
  }
  return state;
};

export default saveTokenReducer;

-

import {IS_LOGIN} from '../actions/types';

let initialState = {
  isLogin: false,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case IS_LOGIN:
      state = {
        ...state,
        isLogin: true,
      };
      break;
    default:
      return state;
  }
  return state;
};

export default userReducer;

акции

import {SAVE_TOKEN} from './types';

export const saveToken = token => {
  return {
    type: SAVE_TOKEN,
    payload: token,
  };
};

-

import {IS_LOGIN} from './types';

export const isLoginFunc = isLogin => {
  return {
    type: IS_LOGIN,
    payload: isLogin,
  };
};

магазин

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const rootReducer = combineReducers({
  user: userReducer,
  count: countPlayReducer,
  favorite: isFavoriteReducer,
  token: saveTokenReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

Редактировать

Я выясняю проблему, Теперь в функции входа в систему после получения ответа от API я отправляю два действия соответственно

facebookAuth = async()=>{
....
 this.props.dispatch(isLoginFunc(true));  // first

 this.props.dispatch(saveToken(token)); // second
....
}

Но когда я отправляю saveToken(token) во-первых Я могу видеть токен в отладчике без проблем!

Так как я могу обработать его и отправить два действия одновременно?

Answer 1

В редуксе мы НИКОГДА не должны изменять объект state в редукторе ... мы возвращаем новый объект

const saveTokenReducer = (state = initial_state, action) => {
  const {payload, type} = action;
  switch (type) {
    case SAVE_TOKEN:
      state = {
        ...state,
        token: payload,
      };
      break;
  }
  return state;
};

Вместо

const saveTokenReducer = (state = initial_state, action) => {
  const { payload, type } = action;
  switch (type) {
    case SAVE_TOKEN:
      return { ...state, token: payload };
    default:
      return state;
  }
};

Относительно отправки двух действий одновременно

const userReducer = (state = initial_state, { action, type }) => {
  switch (type) {
    case UPDATE_LOGIN:
      return { ...state, token: payload, isLogin: !!payload };
    default:
      return state;
  }
};

-

facebookAuth = async () => {
  this.props.dispatch(updateLogin(token));
};

-

import { UPDATE_LOGIN } from './types';

export const updateLogin = token => {
  return {
    type: UPDATE_LOGIN,
    payload: token,
  };
};

Answer 2

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

Этот следующий код предназначен для добавления записи

addVideoGetAction(values, this.props.data, this.callBackFunction)

Эта функция callBack закрывает модальный

callBackFunction = (value: any) => {
    this.setCloseModal();
};

. Вы будете использовать функцию обратного вызова в действии входа в систему. Эта функция будет перенаправлять на страницу

Этот вызов функции в саге. следующий код

function* setAddOrUpdate(params: any) {
        params.callback(redirectPageParams);
}