Избыток не связывает действие с реквизитом в компоненте реакции - PullRequest
Новая
       7

Избыток не связывает действие с реквизитом в компоненте реакции

0 голосов
/ 17 февраля 2019

Так что я борюсь с этим.У меня есть компонент (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 не переходит на реквизит.Вот изображение того, что я вижу в консоли:

enter image description here

создатель действия: 

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
  }
}

Мне бы хотелось кое-что понять:)

1 Ответ

0 голосов
/ 17 февраля 2019

свяжите это с 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)
...