如何使用Redux从一系列复选框中获取值以与其他一些组件共享？

Question

我有这个数组：

const CheckboxItems = () => [
  {
    value: 'itemsCancelled',
    id: 'checkBoxItemsCancelled',
    labelText: 'Items Cancelled',
  },
  {
    value: 'requestDate',
    id: 'checkboxRequestDate',
    labelText: 'Request Date',
  },
];

export default CheckboxItems;

我需要根据复选框是否选中来将值设置为另一个组件。

默认情况下，将选中复选框。

这是我正在使用的组件：

       {CheckboxItems().map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              defaultChecked
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              onChange={onChange}
              columnsFilterHandler={columnsFilter}
            />
          </ToolbarOption>
        ))}

这是同一组件上的调度程序：

connect(
    ({ cancellations }) => ({
      columnsSelected: cancellations.columnsSelected,
    }),
    dispatch => ({
      columnsFilterHandler: columns => {
        dispatch(columnsFilter(columns));
      },
    }),
  ),

这是动作：

const columnsFilter = columns => ({
  type: ActionTypes.COLUMNS_FILTER,
  payload: columns,
});

减速器：

[ActionTypes.COLUMNS_FILTER](state, action) {
    return {
      ...state,
      columnsSelected: action.payload,
    };
  },

但是我需要分别处理这些复选框的状态，该怎么办？

Answer 1

首先，我建议您使用Redux中使用的最新的sintax，并仅对每个人都可以使用mapStateToProps和mapDispatchToProps来理解和帮助您。

我认为，如果您要在应用程序中共享这两个复选框，则只需在id中存储id和值（是否选中）。 最小必要状态。

在initialState中，您可以使用以下checkboxes:[{ checked: true, id: 'checkBoxItemsCancelled' }, { checked:true, id: 'checkboxRequestDate' }]进行初始化checkboxes:[{ checked: true, id: 'checkBoxItemsCancelled' }, { checked:true, id: 'checkboxRequestDate' }]

该操作可能类似于changeChecked接收到的ID，例如：

const changeChecked = id => ({ type: CHANGE_CHECKED_CHECKBOX, payload: {id}, });

约化器类似： case CHANGE_CHECKED_CHECKBOX: return state.checkboxes.map(checkbox => { if (!checkbox.id === action.payload.id){ return checkbox } return {...checkbox, checked: !checkbox.checked} })

最后，您可以在mapStateToProps中访问这些值，并在复选框的onChange函数中启动带有ID的操作changeChecked 。

希望对您有所帮助，请回复：）