使用 Lodash 在 Redux/React 中添加和删除数据 from/to 状态

Question

我有一个带复选框的 table。当用户选中一个复选框时，id 将发送给动作创建者。

Component.js

handlePersonSelect({ id }, event) {
   const { selectPerson, deselectPerson } = this.props;
   event.target.checked ? selectPerson(id) : deselectPerson(id);
}

action.js

export function selectPerson(id) {
  console.log("selected")
  return {
    type: SELECT_PERSON,
     payload: id
  };
}

export function deselectPerson(id) {
  return {
    type: DESELECT_PERSON,
     payload: id
  };
}

我可以一直走到这一步，但我迷路了：这是有问题的代码：

import { 
  SELECT_PERSON,
  DESELECT_PERSON,
  FETCH_PEOPLE
} from '../actions/types';


const INITIAL_STATE = {  people:[], selectedPeople:[]};

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_PEOPLE:
        return {...state, people: action.payload.data};
    case SELECT_PERSON:
      return [action.payload, ...state ]; 
    case DESELECT_PERSON:
      return _.without({state, selectedPeople:action.payload});
  }
  return state;
}

selectedPeople 状态应该 add/subtract id 是基于每个案例的。截至目前，每次我取消选择 id 时，我的整个 "people" table 都会消失。

Answer 1

在所有情况下，你都应该return reducer 的完整状态，所以：

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_PEOPLE:
      return {...state, people: action.payload.data};
    case SELECT_PERSON:
      return {...state, selectedPeople: [ ...state.selectedPeople, action.payload]}; 
    case DESELECT_PERSON:
      return {...state, selectedPeople: _.without(state.selectedPeople, action.payload)}; 
    default
      return state;
  }
}

另请注意，您没有 DESELECT_PERSON 操作，而是 2 SELECT_PERSON 操作。可能是打字错误。

使用 Lodash 在 Redux/React 中添加和删除数据 from/to 状态

Adding and Removing Data from/to State in Redux/React using Lodash

state

lodash

reactjs

redux