Как я могу передать начальное состояние редуктора компоненту?

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,
      };
    });
  },

И у меня есть этот компонент, где мне нужно использовать это действие/reducer.

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 => (...) в компоненте выше.

У вас есть идея, как инициализировать мой компонент с этим массивом из редуктора?

Я не знаю, смогу ли я использовать что-то вроде mapStateToProps, может быть

Answer 1

Вам не хватает немного логики, необходимой, чтобы это заработало.Вам нужно включить 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);

Вместе после вашего метода рендеринга ваш код должен выглядеть примерно так:

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

Надеюсь, это поможет.

Answer 2

Похоже, вы не настроили mapStateToProps и mapDispatchToProps.

Вот соответствующие документы.

Вы хотите сделать что-то вроде этого: (полная форма):

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

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