使用axios API中redux对toastify进行响应

fcipmucu 于 2022-11-12 发布在 iOS

关注(0)|答案(3)|浏览(144)

我试图发送从我的服务器（express）发送到axios的错误消息，错误消息显示在toastify组件，但错误消息没有显示在这里是登录axios函数与toastify如何显示toastify消息内我的网页从redux？
下面是我代码：

// redux controller
const login = async (username, password) => {  
await axios.post("/login",{username,password,},
        { withCredentials: true });};

 // reducer page
export function generateError(prop) {
    return function (dispatch) {
        dispatch({
            type: "USER_FAIL"
        });
        toast.error(prop);
    };
}

export function generateSuccess(prop) {
    return function (dispatch) {
        dispatch({
            type: "USER_SUCCESS"
        });
        toast.success(prop);
    };
}

export const login = createAsyncThunk(
"/login",
async ({ username, password }) => {
    try {
        const data = await authService.login(username, password);
        if (data) {
            if (data.errors) {
                const { username, password } = data.errors;
                if (username) generateError(username)
                else if (password) generateError(password);
            } else {
                generateSuccess(data.success);
            }
        }
        return { user: data };
    } catch (error) {
        console.log(error);
    }
}
  );

// login page

 const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(login({ username, password }));
}

我正在使用react-tostify和@redux-toolkit，但消息没有显示在我的页面内

redux

来源：https://stackoverflow.com/questions/72017203/react-toastify-with-redux-from-axios-api

3条答案

按热度按时间

mo49yndu1#

我修复了它，这里是我的代码：
//auth.js（还原页面）

export const login = createAsyncThunk(
"/login",
async ({ username, password }) => {
    try {
        const {data} = await axios.post(
            "/login",
            {
                username,
                password,
            },
            { withCredentials: true }
        ); 
        return { user: data };
    } catch (error) {
        console.log(error);
    }
});

const initialState = user
? { isLoggedIn: true, user }
: { isLoggedIn: false, user: null };

const authSlice = createSlice({
name: "auth",
initialState,
extraReducers: {
    [login.fulfilled]: (state, action) => {
        state.isLoggedIn = true;
        state.user = action.payload.user;
    },
    [login.rejected]: (state, action) => {
        state.isLoggedIn = false;
        state.user = null;
    },
    [logout.fulfilled]: (state, action) => {
        state.isLoggedIn = false;
        state.user = null;
    },
}})
const { reducer } = authSlice; export default reducer;

登录页面：

const { isLoggedIn } = useSelector((state) => state.auth);
const dispatch = useDispatch();

const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(login({ username, password })).then(data => {
        console.log(data)
        if (data.payload.user) {
            if (data.payload.user.errors) {
                const { username, password } = data.payload.user.errors;
                if (username) generateError(username)
                else if (password) generateError(password);
            } else {
                generateSuccess(data.success);
                navigate("/dashboard");
            }
        }
    })
}

我意识到，当我备份数据时，它有一个对象名称payload，我使用它从express获取错误消息，然后将消息放入toastify函数gettingError中，它在这里

const generateError = error => {
    toast.error(error, {
        position: "bottom-right",
    })
}

赞(0）回复(0）举报 2022-11-12

dsekswqp2#

海我也在寻找同样的问题，而搜索我发现了一个解决方案，在与此：react-toastify-with-redux
我的代码：authAction.js

import 'react-toastify/dist/ReactToastify.min.css';
import { toast} from 'react-toastify';

export const registerUser = (userData) => dispatch =>{
axios.post('user/register',userData)
.then(res=>toast.success('Your Account Created Successfully 👍'))
.then(res=> window.location = '/authentication/sign-in')
.catch(err=>dispatch(
    {
        type: GET_ERRORS,
        payload: err.response.data
    }
),toast.error("Error 😣"))
// .catch((err)=> {return })

};
在您的注册页面上添加

<ToastContainer />

就这样...

赞(0）回复(0）举报 2022-11-12

mctunoxg3#

这个答案可能有点晚了。但是我遇到了这个问题，决定用我的方式来解决。我知道有toast. promise来处理promises，我不想每次都调用dispatch.then。所以我可以把调度传递给我的action Package 器。下面是我的代码。
第一个

赞(0）回复(0）举报 2022-11-12

我来回答

使用axios API中redux对toastify进行响应

3条答案

相关问题

热门标签

最新问答