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

问题描述

我有应用程序包含标签，这些标签根据我传递给标头请求的令牌从 API 获取数据，

I have App contains Tabs that gets data from API bassed on token I passed to the header request,

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

So in the login screen, i dispatch an action to save token after user login and it's saved well

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

But the issue is after user login and go to home screen "save token Action dispatched" I got error 401 unauthorized, and when I log Token in getting data function I got empty in the debugger although save token dispatched".

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

But when I open the app again after killing App and Go to Home " because I'm login before and save token, And I use redux-persist to save it so it's saved before when logging first time" its work fine!

所以我不知道第一次登录时出了什么问题！

So I don't know whats the wrong When Login at first time!

这是主屏幕代码片段

 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函数中我分别调度了两个动作

Edit

I figure out the problem, Now in the Login function after getting the response from the API I dispatch two actions Respectively

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

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

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

But when I dispatch saveToken(token) firstly I can see the token in the debugger without problems!

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

So how can i handle it and dispatch two actions at the same time?

推荐答案

在 redux 中我们永远不应该改变 reducer 中的 state 对象......我们返回一个全新的对象

In redux we should NEVER alter the state object in reducer ... we return a brand new object

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,
  };
};

这篇关于如何避免从 Redux 商店缓慢获取状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！