How can I update my items in redux state? - react-native

Question

I have state that looks following:
const initialState = {
employee: '',
companyNumber: '',
insuranceCompany: '',
workHealthcare: '',
actionGuide: '',
}
And I have screen where I want to update/edit these values.
And the updated values are shown here in this screen.
this is my action file:
const UPDATE_EMPLOYEE_DETAILS = 'UPDATE_EMPLOYEE_DETAILS'
const UPDATE_COMPANYNUMBER_DETAILS = 'UPDATE_COMPANYNUMBER_DETAILS'
const UPDATE_INSURANCECOMPANY_DETAILS = 'UPDATE_INSURANCECOMPANY_DETAILS'
const UPDATE_WORKHEALTHCARE_DETAILS = 'UPDATE_WORKHEALTHCARE_DETAILS'
const UPDATE_ACTIONGUIDE_DETAILS = 'UPDATE_ACTIONGUIDE_DETAILS'
export const employeeEditAction = (text) => ({
type: UPDATE_EMPLOYEE_DETAILS,
payload: { employee: text },
})
export const companyNumberEditAction = (text) => ({
type: UPDATE_COMPANYNUMBER_DETAILS,
payload: { companyNumber: text },
})
export const insuranceCompanyEditAction = (text) => ({
type: UPDATE_INSURANCECOMPANY_DETAILS,
payload: { insuranceCompany: text },
})
export const workHealthcareEditAction = (text) => ({
type: UPDATE_WORKHEALTHCARE_DETAILS,
payload: { workHealthcare: text },
})
export const actionGuideEditAction = (text) => ({
type: UPDATE_ACTIONGUIDE_DETAILS,
payload: { actionGuide: text },
})
and this is the reducer file.
const UPDATE_WORKPLACE_DETAILS = 'UPDATE_WORKPLACE_DETAILS'
const initialState = {
employee: '',
companyNumber: '',
insuranceCompany: '',
workHealthcare: '',
actionGuide: '',
}
const workplaceValueReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_WORKPLACE_DETAILS:
return {
...state,
employee: action.payload.employee,
companyNumber: action.payload.companyNumber,
insuranceCompany: action.payload.insuranceCompany,
workHealthcare: action.payload.workHealthcare,
actionGuide: action.payload.actionGuide
}
default:
return state
}
}
export default workplaceValueReducer
This is the screen and the function that should save the edited values.
const saveWorkPlaceDetails = () => {
if (employee.length > 0) {
// props.editWorkplaceDetails(
// employee,
// companyNumber,
// insuranceCompany,
// workHealthcare,
// info,
// )
props.saveEmployee(employee)
props.saveCompanyNumber(companyNumber)
props.saveInsuranceCompany(insuranceCompany)
props.saveWorkHealthcare(workHealthcare)
props.saveActionGuide(info)
setEmployee('')
setCompanyNumber('')
setInsuranceCompany('')
setWorkHealthcare('')
setInfo('')
workDetailsSavedToast()
} else {
workDetailsErrorToast()
}
}
const mapDispatchToProps = (dispatch) => ({
//editWorkplaceDetails: bindActionCreators(, dispatch),
saveEmployee: (text) => dispatch(employeeEditAction(text)),
saveCompanyNumber: (text) => dispatch(companyNumberEditAction(text)),
saveInsuranceCompany: (text) => dispatch(insuranceCompanyEditAction(text)),
saveWorkHealthcare: (text) => dispatch(workHealthcareEditAction(text)),
saveActionGuide: (text) => dispatch(actionGuideEditAction(text)),
})
export default connect(null, mapDispatchToProps)(EditWorkplaceDetails)
The input fields looks as following:
<Input
style={inputLicenseEdit}
inputContainerStyle={{
borderBottomColor: colors.white,
width: '100%',
}}
placeholder='Työnantaja'
placeholderTextColor={colors.white}
leftIcon={
<Ionicons name='ios-person-outline' size={30} color={colors.white} />
}
onChangeText={(text) => {
setEmployee(text)
}}
/>[![enter image description here][1]][1]
Currently when I try to update the items in the state it doesn't update and triggers the error toast instead.
What do I need to change here?

Answer 1

You should set as many case in your reducer switch that you have actions' consts.
Example for one action :
export const UPDATE_EMPLOYEE_DETAILS = 'UPDATE_EMPLOYEE_DETAILS'
export const employeeEditAction = (employee) => ({
type: UPDATE_EMPLOYEE_DETAILS,
employee,
})
import {UPDATE_EMPLOYEE_DETAILS, /** ... other actions */} from 'action path';
const workplaceValueReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_EMPLOYEE_DETAILS:
return {
...state,
employee: action.employee
}
// ... other cases
default:
return state
}
}
It looks like you update all your workplace's values at the same time, so you should simply do :
export const UPDATE_WORKPLACE_DETAILS = 'UPDATE_WORKPLACE_DETAILS'
export const updateWorkPlaceDetailsAction = (details) => ({
type: UPDATE_WORKPLACE_DETAILS,
details,
})
import {UPDATE_WORKPLACE_DETAILS} from 'action path';
const workplaceValueReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_WORKPLACE_DETAILS:
return action.details || state;
default:
return state
}
}
I personnaly set both cases, so one action for the whole object, plus one action foreach object's attributes I want to update
PS : write "js" after your first line backticks block to get code colors

Answer 2

"What if I want to have the cars listed under certain user like this. user: {cars: [{}]}"
(Replied in previous answered)
It depends of what you want to do.
Examples :
// state is your user
const userReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_CAR:
const nextState = {
...state,
cars: state.cars.slice() // copy array, because all children that ara objects and arrays, should be immutable too
};
return nextState;
newtState.cars.push(action.car);
/** can be done like that too, but it consume more performance */
return {
...state,
cars: [...state.cars, action.car]
}
case UPDATE_CAR:
const nextState = {
...state,
cars: state.cars.slice();
};
nextState.cars[action.index] = action.car;
/** OR even : */
nextState.cars[action.index] = {...state.cars[action.index], [action.key]: action.value}
return nextState;
case REMOVE_CAR:
const nextState = {
...state,
cars: state.cars.slice()
};
// do not use splice before copying the array and do not return directly splice
newtState.cars.splice(action.index, 1);
return nextState;
default:
return state
}
}
see documentation for slice and splice