Question

我有App包含的选项卡，这些选项卡从API传递到标题请求的令牌中提取数据，

因此，在登录屏幕中，我在用户登录后调度了一项操作以保存令牌，并且保存得很好

但是问题是在用户登录并进入主屏幕后“保存令牌动作已调度”后，我得到了未经授权的错误401，并且当我在获取数据功能中登录令牌时，尽管调试器中出现了 empty 保存已分发的令牌”。

但是当我在杀死App并再次进入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

获取响应令牌后，然后重定向到页面。也许应该添加回调函数来执行操作。例如：

以下代码用于添加记录

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

此callBackFunction关闭模式

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

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

此函数在传奇中调用。以下代码

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

如何避免Redux存储状态缓慢？

编辑

2 个答案: