无法将组件连接到 Redux 存储

Question

我正在尝试将我的组件 CMSForm 连接到 Redux 商店，但无法这样做。这是我的：

减速器：

const cmsDefaultState = {

  cmsNum: "",

  facilityName: ""

};

export default (state = cmsDefaultState, action) => {

  switch (action.type){

    case 'SET_CMS_ID':

      return Object.assign({}, state, {

        cmsNum: action.cmsNum

      });

    case 'SET_FACILITY_NAME':

      return [

             ...state,

              action.facilityName

          ];

    default:

      return state;

  }

};

店铺：

import { createStore} from 'redux'

import CMSReducer from './CMSReducer.js'

export default () => {

  const store = createStore(CMSReducer);

  return store;

};

选择器：

export const getCMSNum = store =>

  store.cmsNum

export const getFacilityName = store =>

  store.facilityName

方法：

export const setCMSId = (cmsNum = '') => ({

  type: 'SET_CMS_ID',

  cmsNum

});

export const setFacilityName = (facilityName = '') => ({

  type: 'SET_FACILITY_NAME',

  facilityName

});

这是组件：

import React from 'react'

import { connect } from 'react-redux';

import { setCMSId } from '../redux/methods'

import { getCMSNum } from "../redux/selectors";

function mapStateToProps(state) {

  const { CMSReducer } = state

  return { CMSForm: CMSReducer }

}

class CMSForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      cmsCertificationNumber: '',

      facility_name: ''

    };

    this.handleChange = this.handleChange.bind(this);

    this.handleCmsNumber = this.handleCmsNumber.bind(this);

  }

  handleCmsNumber = () => {

    // dispatches actions to add todo

    debugger

    setCMSId(this.state.cmsCertificationNumber);

    alert("CMS Number: " + this.state.cmsNum);

  } // end of HandleCMSNumebr

  handleChange(event) {

   this.setState({cmsCertificationNumber: event.target.value});

 }

  render() {

    return (

      <div>

        <input type="text" value={this.state.cmsCertificationNumber} onChange={this.handleChange} />

        <button className="update-cmsNum" onClick={this.handleCmsNumber}>

          Find

        </button>

      </div>

    )

  }

Answer 1

你需要纠正的事情：在这里，您返回一个数组，但您的状态是一个对象。case 'SET_FACILITY_NAME':&nbsp; &nbsp;return [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;action.facilityName&nbsp; &nbsp; &nbsp; &nbsp;];如果你看一下这行代码：setCMSId(this.state.cmsCertificationNumber)您只是在调用返回对象的函数。您应该调度该操作。您有一个未使用的功能function mapStateToProps(state) {&nbsp;const { CMSReducer } = state&nbsp;return { CMSForm: CMSReducer }}您没有使用此处映射到道具的状态：export default connect(state => ({ cmsNum: getCMSNum(state) }))(CMSForm);更新您可以通过这种方式使用调度：import React from 'react'import { connect } from 'react-redux';import { setCMSId } from '../redux/methods'import { getCMSNum } from "../redux/selectors";class CMSForm extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cmsCertificationNumber: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; facility_name: ''&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; handleCmsNumber = () => {&nbsp; &nbsp; &nbsp; &nbsp; // to dispatch the `setCMSId` action.&nbsp; &nbsp; &nbsp; &nbsp; this.props.setCMSId(this.state.cmsCertificationNumber);&nbsp; &nbsp; } // end of HandleCMSNumebr&nbsp; &nbsp; handleChange = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ cmsCertificationNumber: event.target.value });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.props.cmsNum);&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value={this.state.cmsCertificationNumber} onChange={this.handleChange} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="update-cmsNum" onClick={this.handleCmsNumber}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Find&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }} // end of componentconst mapStateToProps = state => ({ cmsNum: getCMSNum(state) });const mapDispatchToProps = {setCMSId};export default connect(mapStateToProps, mapDispatchToProps)(CMSForm);