如何将减速器的初始状态传递给组件？

Question

我有这个动作

cancellations.js

const toggleCheckboxAction = id => ({
  type: ActionTypes.TOGGLE_CHECKBOX,
  payload: id,
});

而这个减速器：

const initialState = {
  checkboxes: [
    {
      labelText: '...'
      checked: true,
      value: 'itemsCancelled',
      id: 'checkBoxItemsCancelled',
    },
    {
      labelText: '...'
      checked: true,
      value: 'requestDate',
      id: 'checkboxRequestDate',
    },
    {
      labelText: '...'
      checked: true,
      value: 'status',
      id: 'checkboxStatus',
    },
    {
      labelText: '...'
      checked: true,
      value: 'requestedBy',
      id: 'checkboxRequestedBy',
    },
  ],
}

[ActionTypes.TOGGLE_CHECKBOX](state = initialState.checkboxes, action = {}) {
    return state.map(checkbox => {
      if (checkbox.id !== action.payload.id) {
        return checkbox;
      }
      return {
        ...checkbox,
        checked: !checkbox.checked,
      };
    });
  },

我有此组件，需要在其中使用该动作/减速器。

import React from 'react';
import connect from 'react-redux/es/connect/connect';
import { Checkbox } from 'carbon-components-react';
import { compose } from 'redux';
import PropTypes from 'prop-types';
import { toggleCheckboxAction } from '../actions/cancellations';

    const CheckboxList = ({ checkboxes, dispatch }) =>
      // This checkboxes array is what I need to get from the reducer
      checkboxes.map(checkbox => (
        <Checkbox
          key={checkbox.id}
          id={checkbox.id}
          labelText={checkbox.labelText}
          value={checkbox.value}
          checked={checkbox.checked}
          onChange={() => {
            dispatch(toggleCheckboxAction(checkbox.id));
          }}
        />
      ));

    CheckboxList.propTypes = {
      toggleCheckboxesHandler: PropTypes.func.isRequired,
    };

    export default compose(
      connect(
        // I guess here I have to do the connection logic
      ),
    )(CheckboxList);

现在，我收到此错误：

TypeError：无法读取未定义的属性“ map”

这来自上面组件中的checkboxes.map(checkbox => (...)

您是否知道如何使用来自reducer的数组初始化组件？

我不知道我是否可以使用诸如mapStateToProps东西

Answer 1

似乎您尚未设置mapStateToProps和mapDispatchToProps 。

这里是相关的文档。

您想做这样的事情：（长格式）：

const mapStateToProps = (state, ownProps)=>( {
     checkboxes : state[ActionTypes.TOGGLE_CHECKBOX]
}) ;

export default compose(
  connect(
    mapStateToProps
  ),
)(CheckboxList);

Answer 2

您缺少使该工作正常运行的必要逻辑。 您需要在代码末尾包含mapToStateProps并将其连接。

如何使用mapToStateProps

在这之后：

CheckboxList.propTypes = {
      toggleCheckboxesHandler: PropTypes.func.isRequired,
    };

放置：

const mapStateToProps = state => ({
  //whatever you are bringing over
  //example auth: state.auth 
});

并像这样连接它：

export default connect(
  mapStateToProps,
  { toggleCheckboxesHandler }
)(CheckboxList);

一起，在您的render方法之后，您的代码应如下所示：

CheckboxList.propTypes = {
          toggleCheckboxesHandler: PropTypes.func.isRequired,
        };
const mapStateToProps = state => ({
      //whatever you are bringing over
      //example auth: state.auth 
 });
 export default connect(
      mapStateToProps,
      { toggleCheckboxesHandler }
    )(CheckboxList);

希望这可以帮助。