javascript - 无法将组件连接到 Redux 存储
问题描述
我正在尝试将我的组件 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
所以不知道我哪里出错了或者该怎么做。
任何帮助将不胜感激,谢谢!
解决方案
你需要纠正的事情:
在这里,您返回一个数组,但您的状态是一个对象。
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);
推荐阅读
- javascript - 将数据绑定到角度复选框
- laravel - 创建具有多个一对多关系值的数据列表
- google-app-engine - Google Cloud 函数能否与 Appengine 共享数据存储?
- neural-network - 使用“咖啡时间”对 alexnet 测试进行基准测试
- nginx - 为什么 nginx 不测试所有可用位置?
- python - Visual Studio Code - 具有自动完成功能的 Python 交互式数据科学 REPL
- traefik - Traefik - 重定向不适用于没有斜杠的 PathPrefixStrip
- php - 修复悬停时闪烁的 wordpress 特色图片
- javascript - 尝试在 Javascript 中实现 ADAL (Azure AD),不断获得登录/重定向循环
- python - Databricks 群集未初始化 Azure 库并出现错误:模块“lib”没有属性“SSL_ST_INIT”