加载资源失败:服务器响应404()状态。在react-redux应用程序上使用axios调用rails API

问题描述 投票:0回答:0

我正在尝试通过 Rails API 在我的 React-Redux 应用程序中注册用户并将其存储在 localStorage 中,以便我可以使用它来登录,并收到 404 错误。我不明白为什么,因为我使用了正确的 API 端点:(POST /api/v1/register/:name/:email/:password(.:format))

这是registerSlice的代码:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  user: null,
  logged_in: false,
  error: null,
};

export const register = createAsyncThunk(
  'user/register',
  ({
    email, name, password, setLoading,
  }) => {
    const result = axios
      .post(
        `https://dreamcars2.onrender.com/api/v1/register/${name}/${email}/${password}`,
      )
      .then((response) => {
        localStorage.setItem('user', JSON.stringify(response.data));
        window.location.reload();
      })
      .catch((error) => {
        setLoading(false);
        return {
          user: null,
          logged_in: false,
          error: error.response.data.error,
        };
      });
    return result;
  },
);
export const login = createAsyncThunk(
  'user/login',
  ({ email, password, setLoading }) => {
    const result = axios
      .get(`https://dreamcars2.onrender.com/api/v1/login/${email}/${password}`)
      .then((response) => {
        localStorage.setItem('user', JSON.stringify(response.data));
        window.location.reload();
        return {
          user: true,
          logged_in: true,
        };
      })
      .catch((error) => {
        setLoading(false);
        return {
          user: null,
          logged_in: false,
          error: error.response.data.error,
        };
      });
    return result;
  },
);

export const registerSlice = createSlice({
  name: 'register',
  initialState,
  reducers: {
    checkUser: () => {
      const user = JSON.parse(localStorage.getItem('user'));
      if (user) {
        return user;
      }
      return {
        user,
        logged_in: false,
        error: null,
      };
    },
  },
  extraReducers: {
    [register.fulfilled]: (state, action) => ({
      ...state,
      user: action.payload.user,
      logged_in: action.payload.logged_in,
      error: action.payload.error,
    }),
    [register.rejected]: (state, action) => ({
      ...state,
      error: action.payload,
    }),
    [login.fulfilled]: (state, action) => ({
      ...state,
      user: action.payload.user,
      logged_in: action.payload.logged_in,
      error: action.payload.error,
    }),
    [login.rejected]: (state, action) => ({
      ...state,
      error: action.payload,
    }),
  },
});

export default registerSlice.reducer;
export const { checkUser } = registerSlice.actions;

请帮忙。

javascript ruby-on-rails axios react-redux local-storage
© www.soinside.com 2019 - 2024. All rights reserved.