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>
    )
  }
} // end of component

export default connect(state => ({ cmsNum: getCMSNum(state) }))(CMSForm);

如果您在这小段代码中看到，我正在尝试设置CMS ID。

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

如果有人想看到我的index.js，就在这里：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider, connect } from 'react-redux';
import configureStore from './redux/configureStore.js'

import { setCMSId } from './redux/methods.js'
const store = configureStore();

// store.dispatch(setCMSId("Hello"));
// console.log("[" + store.getState().cmsNum + "]");

ReactDOM.render(
  <React.StrictMode>
  <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

但这似乎也不会触发商店。我不确定自己在做什么错？ CMSForm组件位于我的App.js内部，这里没有提到Redux存储。我只将它放在index.js内，所以不确定我要去哪里或怎么做。

我们将不胜感激，谢谢！

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

无法将组件连接到Redux存储区

1 个答案: