Redux不会将动作连接到React组件中的道具

Question

所以我为此感到挣扎。 我有一个组件（InputTblSetting），我正尝试连接到商店（redux）和动作创建者：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import TextField from 'material-ui/TextField'
import { changeFieldToEdit } from './CustomizeActions'

class InputTblSetting extends Component {
  onInputClick = () => {
    const { changeFieldToEdit, inputKey, editInputs, settingsData } = this.props
    changeFieldToEdit(inputKey, editInputs, settingsData)
  }

  render() {
    const { edit, styles, value, label } = this.props
    if (edit) {
      return (
        <TextField
          id="outlined-dense"
          label={label}
          margin="dense"
          variant="outlined"
        />
      )
    }
    return (
      <span onClick={this.onInputClick} style={styles}>
        {value}
      </span>
    )
  }
}

const mapStateToProps = ({ CustomizeUserReducer }) => {
  const { editInputs, settingsData } = CustomizeUserReducer
  return { editInputs, settingsData }
}

export default connect(
  mapStateToProps,
  { changeFieldToEdit }
)(InputTblSetting)

与mapStateToProps到商店的连接工作正常，但是以某种方式与动作创建者的连接失败。 changeFieldToEdit没有传递给道具。 这是我在控制台中看到的图片：

动作创建者：

import {
  OFF_THE_SHELF_SUBSTRING_CHANGE,
  COST_AND_LEAD_TBL_DATA,
  HANDLE_LOADER,
  EDIT_INPUT
} from '../../../global actions/types'
import { getCustomizationSettings } from '../../../Services/Network'
import { createTblData } from './CustomizeLogic'

export const changeFieldToEdit = (inputKey, editInputs, settingsData) => {
  const newEditInputs = getNewInputs(inputKey, editInputs) 
  const tblDataArr = createTblData(settingsData, newEditInputs)
  return {
    type: EDIT_INPUT,
    payload: { newEditInputs, tblDataArr }
  }
}

减速器：

import {
  OFF_THE_SHELF_SUBSTRING_CHANGE,
  COST_AND_LEAD_TBL_DATA,
  EDIT_INPUT
} from '../../../global actions/types'
import { COST_AND_LEAD_NAMES } from '../../../Services/Strings'

const INITIAL_STATE = {
  offTheShelfSubstrings: [],
  costAndLeadTblData: [],
  editInputs: COST_AND_LEAD_NAMES,
  settingsData: []
}

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {    
    case EDIT_INPUT:
      return {
        ...state,
        editInputs: action.payload.newEditInputs,
        costAndLeadTblData: action.payload.tblDataArr
      }
    default:
      return state
  }
}

我希望了解一些见解：）

Answer 1

将其与bindActionCreators绑定

import { bindActionCreators } from 'redux'

// import all your actions creators that has exports
// replace whateverActions with what you want
import * as whateverActions from './CustomizeActions'

// your original mapStateToProps
const mapStateToProps = ({ CustomizeUserReducer }) => {
  const { editInputs, settingsData } = CustomizeUserReducer
  return { editInputs, settingsData }
}

// your new mapDispatchToProps, keep in mind that Object.assign needs 
// pollyfills for IE (if I remember it right)
const mapDispatchToProps = dispatch => {
  return bindActionCreators(Object.assign({},
      whateverActions
    ), dispatch);
  }

export default connect(mapStateToProps, mapDispatchToProps)(InputTblSetting)