反应 redux axios post 注册请求

Question

我正在学习 redux，正在尝试创建注册表单。当我发送表格时，什么也没有发生。你能告诉我 action 和 reducer 以及 service 的开发是否做得好吗？我的印象是没有数据进入 action 或者我在 axios 上做错了什么。我尝试将 FormData() 用于 axios，但结果仍然相同。提前致谢

动作授权

export const registerClient = (dispatch, lastname,firstname,adress,codePostal,city,country,phone,email,password, isLoggedIn)=>{
    const data = (lastname,firstname,adress,codePostal,city,country,phone,email,password, isLoggedIn)
        dispatch({
            type: ActionTypes.REGISTER_SUCCESS,
            payload: {client: data}
        })   
}

Reducer 授权

export default function AuthClient (state = initialState, action){
    const {type, payload} = action;
    switch (type) {
        case ActionTypes.LOGIN_SUCCESS:
            return {
                ...state,
                isLoggedIn: true,
                client: payload.client
            }
    
        case ActionTypes.LOGIN_FAIL:
            return {
                ...state,
                isLoggedIn: false,
                client: null
            }

        case ActionTypes.REGISTER_SUCCESS:
            console.log(payload)
            return {
                ...state,
                isLoggedIn: true,
                client: payload.client
            }

        case ActionTypes.REGISTER_FAIL:
            return {
                ...state,
                isLoggedIn: false,
            }

        case ActionTypes.LOGOUT:
            return {
                ...state,
                isLoggedIn: false,
                client: null,
            }
        default:
            return state;
    }
}

服务


export const registerService = (lastname,firstname,adress,codePostal,city,country, navigate,phone,email,password, isLoggedIn, dispatch) =>{
    
    axios.post(API_URL_CLIENT_AUTH + "createClient",{     
        lastname,
        firstname,
        adress,
        codePostal,
        city,
        country,
        phone,
        email,
        password
})
    .then((response)=>{
        actionAuth.registerClient(lastname,firstname,adress,codePostal,city,country, 
        navigate,phone,email,password,dispatch)

        localStorage.setItem("client", JSON.stringify(response.data))
        return response
    })
    .catch((error)=>{
        const errorFailRegister = error
        failRegisterClient(dispatch)
        errorAction(errorFailRegister,dispatch)
    })
}

Answer 1

我会重写你的动作，因为它没有明确定义：

export const registerClient = (lastname, firstname, address, codePostal, city, country, phone, email, password, isLoggedIn) => {
    // ** here remove the dispatch
    return {
        type: ActionTypes.REGISTER_SUCCESS,
        payload: {
            client: {
                lastname,
                firstname,
                address,
                codePostal,
                city,
                country,
                phone,
                email,
                password,
                isLoggedIn,
            }
        }
    }
}

你的减速器没问题。最后更改在服务中：

export const registerService = (lastname, firstname, adress, codePostal, city, country, navigate, phone, email, password, isLoggedIn, dispatch) => {

    axios.post(API_URL_CLIENT_AUTH + "createClient", {
        lastname,
        firstname,
        adress,
        codePostal,
        city,
        country,
        phone,
        email,
        password
    })
        .then((response) => {
            // ** here, call the dispatch
            dispatch(actionAuth.registerClient(lastname, firstname, adress, codePostal, city, country,
                navigate, phone, email, password, dispatch))
            
            localStorage.setItem("client", JSON.stringify(response.data)) // You can do this later with a middleware, when you're ready
            // for that
            return response
        })
        .catch((error) => {
            const errorFailRegister = error
            failRegisterClient(dispatch)
            errorAction(errorFailRegister, dispatch)
        })
}

所以，解释一下：'dispatch'是告诉redux给运行一个action，所以这个action本身不能调用dispatch函数。你可以在你正在构建的 redux store 的客户端中调用 dispatch

Answer 2

非常感谢大家的帮助，@Osmanys Fuentes-Lomb修复所有 redux 都是正确的，然后我像这样修复了 axios：


export const registerService = (lastname, firstname, adress, codePostal, city, country, navigate, phone, email, password, isLoggedIn, dispatch) => {

const client ={
       lastname,
       firstname,
       adress,
       codePostal,
       city,
       country,
       phone,
       email,
       password
}

   axios.post(API_URL_CLIENT_AUTH + "createClient",client)
       .then((response) => {
           // ** here, call the dispatch
           dispatch(actionAuth.registerClient(lastname, firstname, adress, codePostal, city, country,
               navigate, phone, email, password, dispatch))
           
           localStorage.setItem("client", JSON.stringify(response.data)) // You can do this later with a middleware, when you're ready
           // for that
           return response
       })
       .catch((error) => {
           const errorFailRegister = error
           failRegisterClient(dispatch)
           errorAction(errorFailRegister, dispatch)
       })
}

反应 redux axios post 注册请求

react redux axios post signup request

reactjs

redux

react-redux

redux-form