[React Native]: Usage with Redux / Redux Persist

[joncursi]

I store most of my app's internal state in Redux. Doing so allows components to communicate with one another via state variables, and it standardizes the process under one single API to get and set those state variables.

I'd really like to store the user's ID and other tokens in Redux as well, and access them synchronously via connecting my components:

const mapStateToProps = (state) => ({
  userState: state.userState,
});

...

connect(mapStateToProps);

...

const normalFunction = () => {
  ...
  const userId = userState._id;
  const userToken = userState.token;
  const userTokenExpires = userState.tokenExpires;
  ...
};

When the app boots up, the tokens could be rehydrated to the store using redux-persist.

    persistStore(
      store, {
        storage: AsyncStorage,
        whitelist: [
          ...
          'userState',
          ...
        ],
      },
    );

Right now, it looks like I have to store the user tokens directly in AsyncStorage in order for this package to work properly (specifically using setTokenStore), rather than being able to store it in Redux, and use redux-persist to handle the rehydration of tokens from the store.

[aymericbouzy]

My understanding is that setTokenStore is designed to be agnostic to the way you store the token. Maybe try something in this vein:

setTokenStore({
  set: async function({userId, token, tokenExpires}) {
    store.dispatch(authenticate(userId, token, tokenExpires))
  },
  get: async function() {
    const {_id: userId, token, tokenExpires} = store.getState().userState
    return {userId, token, tokenExpires}
  },
})