I'm learning redux, I'm trying to create a registration form. When I send my form nothing happens. Can you tell me if the development of the action and the reducer and service are well done?I have the impression that no data goes into the action or maybe I'm doing something wrong with axios. I tried with FormData() for axios but still the same result. thanks in advance
action auth
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 auth
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;
}
}
Service
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)
})
}
I will rewrite your action, cause it's not well defined:
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,
}
}
}
}
Your reducer is fine. Last change is in the service:
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)
})
}
So, explaining: 'dispatch' is to tell redux to run an action, so the action itself cannot call the dispatch function. You can call dispatch in the client of the redux store you are building