How can I update my items in redux state?

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?

Solution

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