如何在 redux 状态下更新我的项目？

Question

我的状态如下：

const initialState = {
    employee: '',
    companyNumber: '',
    insuranceCompany: '',
    workHealthcare: '',
    actionGuide: '',
}

我在屏幕上想要 update/edit 这些值。

更新后的值显示在此屏幕中。

这是我的动作文件：

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 },
})

这是reducer文件。

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

这是应该保存编辑值的屏幕和函数。

  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)

输入字段如下所示：

      <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]

目前，当我尝试更新状态下的项目时，它不会更新并会触发错误 toast。

我需要在这里更改什么？

Answer 1

你应该在你的 reducer 开关中设置你有动作常量的 case。
一个动作的例子：

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
  }
}

您似乎同时更新了所有工作场所的值，所以您应该这样做：

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
  }
}

我个人设置了这两种情况，所以对整个对象一个动作，再加上我想更新的每个对象的属性一个动作

PS : 在第一行反引号块后写“js”以获得代码颜色

Answer 2

"What if I want to have the cars listed under certain user like this. user: {cars: [{}]}"

（在之前的回答中回复）

这取决于你想做什么。示例：

// 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
  }
}

请参阅 slice and splice

的文档

如何在 redux 状态下更新我的项目？

How can I update my items in redux state?

react-native

redux