如何在反应中删除减速器中数组中的对象？

Question

我知道我的问题已经被问过了，但我不这么认为:

我想删除我的 reducer 上的一个项目，但我尝试过的一切都没有用。

我尝试了很多东西，但在这两天被屏蔽后，我想我需要帮助！

这里是调度员：

store.dispatch({
     type: 'REMOVE_COIN',
     payload: {
          id:coinId
      }
 })

这是减速器：

const intialState = {
}

const coinReducer = (state = intialState, action) => {
    switch(action.type){
        case "REGISTER_COIN":
            return {
                ...state,
                [action.payload.id]: {
                    id:action.payload.id,
                    position:action.payload.position,
                }
            }
        case "REMOVE_COIN":

            const newState = Object.assign([], state)
            // console.log(newState)

            // if (newState.includes(Object(action.payload.id)) > -1) {
                // console.log('OUI')
            // }else{
                // console.log('NON')
            // }

            // const newState = [...state]
            // const index = newState.findIndex(coin => coin.id == action.payload.id)
            // if (index !== -1) {
            //     newState.splice(index, 1);
            //     console.log(newState)
            // }

            const finalState = newState.filter(coin => coin.id !== action.payload.id)
            console.log(finalState)
            // const coinId = action.payload.id

            // // console.log(newState)

            // const indexOfCatToDelete = newState.findIndex(coin => coin.id == String(action.payload.id))


            // console.log(indexOfCatToDelete)
            // newState.splice(indexOfCatToDelete, 1)
            // console.log(newState)
            // return newState     
            // return {
            //     state : newState.filter( (item, index) => index !== action.index)
            //  }    
            // return finalState
            // const numIndex = parseInt(action.index)
            // return {
            //     state: [
            //     ...state.slice(0, numIndex),
            //     ...state.slice(numIndex+ 1)
            //     ]
            // }
        default:
            return state
    }
}

export default coinReducer

我让所有的评论来展示我尝试过的一切。

感谢您的帮助！

Answer 1

您需要将初始状态作为数组才能正常工作。或者在里面加上coins属性，就是一个数组：

const initialState = [];
// Or 
const initialState = {coins: []}

确保您实际接收到 action 和 payload.id，然后您可以 return 减速器中的过滤状态：

case "REMOVE_COIN":
  // OR state.coins.filter if that's what you have on the state
  return state.filter(coin => String(coin.id) !== String(action.payload.id));

编辑：回顾一下你的reducer，我注意到你将状态作为一个对象，其中coin id 是一个道具。在这种情况下，您需要按对象键过滤状态：

case "REMOVE_COIN":
  return Object.keys(state)
  .filter(key => key !== String(action.payload.id))
  .reduce((obj, key) => {
    obj[key] = state[key];
    return obj;
  }, {});

如何在反应中删除减速器中数组中的对象？

How to delete object in an array in a reducer in react?

reducers

reactjs

react-redux