我怎样才能改变我的 redux 动作和 reducer 以包含其中包含对象的数组？

Question

我目前有 redux action 和 reducer，可以让我在数组中添加或删除项目。现在我想按以下格式添加更多项目。 [{id: , car: '', text: '', box1Checked: '', box2Checked: '', box3Checked: ''}]

这是我的表格。

这是我当前的动作文件：

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

export const addNewCar = (text) => ({
    type: ADD_NEW_CAR,
    payload: text
})

export const deleteExistingCar = (car) => ({
    type: DELETE_EXISTING_CAR,
    payload: car
})

这是减速器：

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

const initialState = {
  cars: [],
}

const carsListReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, action.payload],
      }
    case DELETE_EXISTING_CAR:
        return {
            cars: [
                ...state.cars.filter(car => car !== action.payload)
            ]
        }
    default:
      return state
  }
}

export default carsListReducer

这是我调用函数添加汽车的地方。

  const addCarDetails = () => {
    if (newCar.length > 0) {
      // setCars([
      //   ...cars,
      //   {
      //     id: cars.length + 1,
      //     license: newCar,
      //   },
      // ])
      props.addNewCar(newCar)
      setValid(true)
      setNewCar('')
      carAddedToast()
    } else {
      setValid(false)
    }
  }

  const removeCar = (item) => {
    props.deleteExistingCar(item)
    //setCars(cars.filter((item) => item.license !== license))
    carRemovedToast()
  }

Answer 1

要更改任何 reducer 值，您需要使用 dispatch() 方法分派一个动作。


// Top-level import 

import {useDispatch} from 'rect-redux'



// Inside a functional component

const dispatch = useDispatch()

  const addCarDetails = () => {
    if (newCar.length > 0) {
     
    // dispatch add new car action to associated reducer      
     dispatch(props.addNewCar(newCar))
      
      setValid(true)
      setNewCar('')
      carAddedToast()
    } else {
      setValid(false)
    }
  }

  const removeCar = (item) => {
    // dispatch remove a car action to associated reducer
       dispatch(props.deleteExistingCar(item)) 
   
    carRemovedToast()
  }

Answer 2

问题已通过以下方式解决。确实需要很小的改变。

    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, {id: state.cars.length, ...action.payload}],
      }

我怎样才能改变我的 redux 动作和 reducer 以包含其中包含对象的数组？

How can I alter my redux action and reducer to have array with objects in it?

react-native

redux