如何在 aysnc function 中调用 redux 调度作为 function 的主体？

Question

i have this API helper in my react native code, but i want the user to logout everytime the jwtt token isExpired

this is the code

  const apiHelper = async (key, payload) => {
  let token = await getToken();
  //to get the currentToken from AsyncStorage
  const isTokenExpired = checkToken(token);
  //checkToken return a boolean (it is work just fine)

  const dispatch = useDispatch();

  if (isTokenExpired) {
    dispatch(logout());
    return;
  }

  //... rest of the API Helper
}

result of this code =>

invalid hook call: Hooks can only be called inside the body of a function component.

what have i tried is calling the redux directly from the store

import store from './src/redux/store';
const apiHelper = async (key, payload) => {
  let token = await getToken();
  //to get the currentToken from AsyncStorage
  const isTokenExpired = checkToken(token);
  //checkToken return a boolean (it is work just fine)

  let redux = store();

  if (isTokenExpired) {
    const { store } = redux;
    store.dispatch(logout());
    return;
  }

  //... rest of the API Helper
}

this code have no error but the state not changed to logout

this is the logout action

export const logout = () => ({type: 'AUTH_RESET'});

and the auth reducer

 const initialState = () => ({
  userInfo: {},
  token: null,
  isLogin: false,
  showOnboard: true,
});

const Fetch = (state = initialState(), action = {}) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      const { token, ...userInfo } = action.payload;
      return {...state, userInfo, token, isLogin: true, showOnboard: null};

    case 'AUTH_RESET':
      const init = initialState()
      init.showOnboard = false
      return {...state, ...init};

    default:
      return state;
  }
};

export default Fetch;

store.js

 export default () => {
  let store = createStore(persistedReducer, applyMiddleware(logger, thunk));
  let persistor = persistStore(store);
  return {store, persistor};
};

the logout action and the reducer work fine if i call it using hooks. but i can't get it work inside an async function.

how can i dispatch the logout inside an async function?

Answer 1

You should have only one store in your application. This line looks suspicious: let redux = store();

Try to import you store and call store.dispatch(action) on it.