Использование recoil. js в реакции, в компоненте класса без использования хуков - PullRequest
0 голосов
/ 12 июля 2020

Я новичок в отдаче и использую все компоненты класса. Вот мое состояние отдачи

export const tokenState = atom({
  key: "tokenState",
  default: "",
});

Как использовать отдачу в компоненте класса и установить токен? Я использовал RecoilRoot в приложении как

<RecoilRoot>
  <Header />
  <Main />
</RecoilRoot>

В login.js, я хочу установить токен в режиме отдачи, но login.js является компонентом класса.

const res = await APIS.login(apiRoute,requestObject);

В res.data.token я получаю токен jwt.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 17 июля 2020

Как сказал @Matt, вы должны превратить свой компонент класса в функциональный, который передает API-интерфейсы Recoil в качестве опоры.

В любом случае, если вы хотите установить токен атома из вашего Login компонента , вы можете просто обернуть Login в компонент, который передает результат useSetRecoilState

const LoginWrapper = () => {
  const setToken = useSetRecoilState(tokenState);
  return <Login setToken={setToken} />;
};

В случае более сложных случаев вы можете использовать Recoil 'useRecoilCallback который позволяет вам использовать все API Recoil сразу

const LoginWrapper = () => {
  const setToken = useRecoilCallback(({ set }) => token => {
    set(tokenState, token);
  });

  return <Login setToken={setToken} />;
};

Обратите внимание: основное различие между использованием setRecoilState и setRecoilCallback заключается в том, что использование setRecoilState автоматически подписывает потребляющий компонент на атом изменяется, а setRecoilCallback не подписывается на него, поэтому вы можете избежать некоторых рендеров.

Вы можете найти оба решения в этом рабочем CodeSandbox . Как видите, компонент PrintToken повторно отображается правильно, как только компонент Login обновляет токен.

Сообщите мне, если вам понадобится дополнительная помощь ?

1 голос
/ 12 июля 2020

Recoil. JS предназначен для использования с хуками реакции, я не думаю, что они предоставляют какие-либо другие функции, кроме хуков. Если вы не можете изменить Login. js на функциональный компонент, попробуйте использовать функциональный компонент-оболочку, который передает токен в качестве опоры для компонента login. js.

Я бы предложил useRecoilState(myAtom).

function LoginWrapper(props) {
    const [token, setToken] = useRecoilState(myAtom);

    useEffect(() => {
      async function get() {
         const { data: { token: jwt } } = await APIS.login(apiRoute,requestObject);

         setToken(jwt);
      }

      get();
    }, []);

    return <LoginComponent {...props} jwt={token} />
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...