无法将组件连接到 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.cmsNumexport 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':

   return [

          ...state,

           action.facilityName

       ];

如果你看一下这行代码：

setCMSId(this.state.cmsCertificationNumber)

您只是在调用返回对象的函数。您应该调度该操作。

您有一个未使用的功能

function mapStateToProps(state) {

 const { CMSReducer } = state

 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 {

    constructor(props) {

        super(props);

        this.state = {

            cmsCertificationNumber: '',

            facility_name: ''

        };

    }

    handleCmsNumber = () => {

        // to dispatch the `setCMSId` action.

        this.props.setCMSId(this.state.cmsCertificationNumber);

    } // end of HandleCMSNumebr

    handleChange = (event) => {

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

    }

    render() {

        console.log(this.props.cmsNum);

        return (

            <div>

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

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

                    Find

        </button>

            </div>

        )

    }

} // end of component

const mapStateToProps = state => ({ cmsNum: getCMSNum(state) });

const mapDispatchToProps = {setCMSId};

export default connect(mapStateToProps, mapDispatchToProps)(CMSForm);