如何避免从 Redux 商店缓慢获取状态？

Question

我的应用包含选项卡，这些选项卡根据我传递给标头请求的令牌从 API 获取数据，

所以在登录屏幕中，我在用户登录后发送了一个操作来保存令牌，并且保存得很好

但问题是在用户登录并转到主屏幕“保存令牌操作已调度”后，我收到错误 401 未经授权，当我在获取数据功能中登录令牌时，我在调试器中得到 empty保存发送的令牌”。

但是当我在杀死应用程序并返回主页后再次打开应用程序时“因为我之前登录并保存了令牌，我使用redux-persist保存它所以它在第一次登录之前保存了” 工作正常！

所以我第一次登录的时候不知道怎么回事！

这里是主屏幕代码 sn-p

 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 获得响应后的 Login 函数中，我分别调度了两个动作

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

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

但是当我发送saveToken(token) 首先我可以在调试器中看到令牌没有问题！

那么我该如何处理它并同时调度两个动作呢？

Answer 1

当响应令牌得到然后重定向到页面。也许应该添加回调函数以进行操作。例如：

以下代码用于添加记录

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

这个callBackFunction是关闭模态

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

您将在登录操作中使用回调函数。此函数将重定向到页面

这个函数在 saga 中调用。以下代码

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

Answer 2

在 redux 中，我们永远不应该改变 reducer 中的 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,
  };
};