Как получить доступ к последнему значению состояния с помощью useSelector после отправки действия в избыточном количестве?

Question

У меня есть экран в проекте React-Native, который, по сути, просто отображает значок загрузки во время извлечения данных с сервера, а затем выводит пользователя на главный экран. Первая функция getPrivateKey() вернет закрытый ключ и сохранит его, используя избыточное состояние в состоянии, а следующая функция connectWithKey() затем использует этот ключ для подключения.

Проблема, с которой я сталкиваюсь, заключается в том, что когда connectWithkey() работает, он использует начальное пустое значение закрытого ключа, а не обновленное значение. Вот код и извинения, если я глуп, это был долгий день :(

export default DataLoader = props => {
  //private key - this should, in theory, update after getPrivateKey()
  const privateKey = useSelector(({ main }) => main.privateKey);
  const dispatch = useDispatch();

  useEffect(() => {
    const configure = async () => {
      //this will update the private key
      await getPrivateKey();

      //this should use the new private key from useSelector, but instead is using the initialised empty object
      await connectWithKey();

      props.navigation.navigate('MainScreen');
    };
    configure();
  }, []);

//.... more code below....

Я попытался добавить privateKey в зависимости массива, который просто вызвал бесконечное l oop, и я Я проверил, что значение обновлено в хранилище приставок - так что я немного растерялся! По сути, похоже, что ловушка useSelector не получает значение fre sh. Любая помощь будет очень признательна ? Спасибо !

РЕДАКТИРОВАТЬ - добавлено больше кода по запросу ?

const getPrivateKey = async () => {
  const privKey = await fetchKeyFromServer();
  dispatch({
   type: 'UPDATE',
   value: privKey 
  });
};

const connectWithkey = async () => {
  //the privateKey here should be the updated value from useSelector
  await connectToServer(privateKey)
};

Answer 1

Похоже, ваша getPrivateKey функция - это гром, но вы не отправляете так? И ничто не мешает вам возвращать значения из thunks.

const getPrivateKey = async (dispatch) => {
  const privKey = await fetchKeyFromServer();
  dispatch({
   type: 'UPDATE',
   value: privKey 
  });
  return privKey // return the key here to whoever wants to use the value immediately.
};

Тогда в вашем useEffect в компоненте вы можете легко использовать возвращаемое значение:)

useEffect(() => {
    const configure = async () => {
      //make sure you 'dispatch' this thunk
      const key = await dispatch(getPrivateKey());

      // pass the key
      await dispatch(connectWithKey(key));
      ...
    };
    ....
  }, []);

Код Выше предполагается, что connectWithKey также является громоотводом. Если это так, вы можете спроектировать thunk таким образом, чтобы он либо использовал переданное значение, либо считывал его из хранилища с избыточностью.

const connectWithkey = (privateKey: passedPrivateKey) = async (dispatch, getState) => {
  const state = getState();
  let privateKey = state.whatever.the.path.is.to.privateKey;

  // use the passed private key if it is present.
  if (passedPrivateKey) {
    privateKey = passedPrivateKey;
  }

  await connectToServer(privateKey)
};

Я использовал этот подход несколько раз в своем приложении. Таким образом, вам не нужно полагаться на состояние в селекторе. И если вы решите положиться на это состояние, зависимости вашего useEffect должны соответственно обновиться. Прямо сейчас это пустой массив, и поэтому эффект не запускается снова при любых изменениях состояния (он действует как функция жизненного цикла componentDidMount).

const privateKey = useSelector(({ main }) => main.privateKey);

useEffect(() => {
 await getPrivateKey();

 if (privateKey) {
   await connectWithKey();
 }
}, [privateKey]);

Таким образом, ваш хук перехватывается. - запускается каждый раз при изменении состояния privateKey. Возможно, вам понадобится какое-то условие для вашего connectWithKey thunk, чтобы оно не запускалось, если ключ нулевой.