useSelector не загружает состояние вовремя - PullRequest
Новая
       8

useSelector не загружает состояние вовремя

0 голосов
/ 19 июня 2020

Я работаю над своим проектом, используя React и Redux.

Я пытаюсь получить поле token из моего состояния auth из моего магазина (которое содержит ключ аутентификации, который я собираюсь отправить на свою сторону сервера), используя useSelector, но дело в том, что он не загружается вовремя . Как мне это исправить?

Я добавлю ниже части моего кода, связанные с этой проблемой:

LikeButton. js: (вот часть, где я пытаюсь для получения токена) 

...

const LikeButton = ({ postId }) => {
  const classes = useStyles();
  const [isLiked, setIsLiked] = useState(false);
  const isMount = useIsMount();
  const dispatch = useDispatch();
  const { token } = useSelector((state) => state.auth);
  const { likedPostsIds } = useSelector((state) => state.likes);

  useEffect(() => {
    if (token) dispatch(fetchLikedPosts(token));
  }, [token]);

...

likeActions. js: 

...

export const fetchLikedPosts = ({ token }) => (dispatch) => {
  fetch("http://localhost:8080/graphql", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: fetchLikedPostsQuery(),
  })
    .then((res) => res.json())

...

authActions. js

...

export const signIn = ({ password, email }) => (dispatch) => {
  dispatch({
    type: IS_AUTH_LOADING,
  });
  fetch("http://localhost:8080/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: signInQuery(password, email),
  })
    .then((res) => res.json())
    .then((resData) => {
      if (resData.errors) {
        dispatch(showNotification("User authentication has failed!", ERROR));
        dispatch({
          type: AUTH_ERROR,
        });
      } else {
        setLocalStorageAuth(resData.data.signIn.token, expiryDate);
        dispatch({
          type: SIGN_IN,
          payload: resData.data.signIn,
        });
      }
    })
    .catch((err) => {
      dispatch(
        showNotification(
          "User authentication has failed. Please try again later.",
          ERROR
        )
      );
      dispatch({
        type: AUTH_ERROR,
      });
      emptyLocalStorage();
    });
};
...

auth. js: 

...

const initialState = {
  token: localStorage.getItem("token"),
  isAuth: localStorage.getItem("isAuth"),
  expiryDate: localStorage.getItem("expiryDate"),
  isLoading: false,
};

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case REGISTER_LOADING:
    case IS_AUTH_LOADING:
      return {
        ...state,
        isLoading: true,
      };
    case SIGN_IN:
      return {
        token: action.payload.token,
        isAuth: true,
        isLoading: false,
      };
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case REGISTER_FAIL:
    case LOGOUT_SUCCESS:
      return {
        token: null,
        isAuth: false,
        isLoading: false,
      };
    case CREATE_USER:
      return {
        ...state,
        isLoading: false,
      };
    default:
      return state;
  }
}

...

1 Ответ

1 голос
/ 20 июня 2020

Функция fetchLikedPosts ожидает объект с ключом token в качестве аргумента. в настоящее время эффект передает только token в качестве аргумента. Попробуйте 

  useEffect(() => {
     // note the change from token to {token}
    if (token) dispatch(fetchLikedPosts({token}));
  }, [token]);
...