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

Question

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

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

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

但是当我在杀死应用程序并转到主页后再次打开应用程序时“因为我之前登录并保存令牌，并且我使用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 获得响应后的 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,
  };
};