[英]How would I set up my reducer properly?
I'm trying to toggle my modal via redux but for some reason I'm getting an error that says: TypeError: Cannot read property 'isModalOpen' of undefined
(pointing to the line isOpen: state.global.isModalOpen
inside List.js
) which means my root reducer isn't defined properly. 我试图通过redux切换我的模态,但是由于某种原因,我收到一条错误消息: TypeError: Cannot read property 'isModalOpen' of undefined
(指向isOpen: state.global.isModalOpen
行isOpen: state.global.isModalOpen
List.js
)这意味着我的根减速器定义不正确。 But I'm sure I've defined it properly inside index.js
file. 但是我确定我已经在index.js
文件中正确定义了它。 What am I doing wrong and how would I be able to resolve this and use these actiontypes properly in order for it to work? 我在做什么错?如何解决该问题并正确使用这些操作类型才能使其正常工作?
Note: The <Modal/>
component is an npm package I installed, I didn't create it on my own. 注意: <Modal/>
组件是我安装的npm软件包,我不是自己创建的。
Here's my List.js
file: 这是我的List.js
文件:
import React, { Component } from 'react';
import Aux from '../../../../hoc/Aux';
import { connect } from 'react-redux';
import Modal from 'react-modal';
class List extends Component {
state = {
isOpen: false
}
componentWillMount() {
Modal.setAppElement('body');
}
toggleModal = () => {
this.setState({isActive:!this.state.isActive});
}
closeModal = () => {
this.setState({isActive: false});
}
render() {
return (
<Aux>
<CheckoutButton clicked={this.toggleModal}/>
<Modal isOpen={this.state.isOpen}>
<button onClick={this.closeModal}>Close</button>
</Modal>
</Aux>
);
}
}
const mapStateToProps = state => {
return {
isOpen: state.global.isModalOpen
}
};
const mapDispatchToProps = dispatch => {
return {
closeModalRedux: () => dispatch({type: CLOSE_MODAL})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(List);
Here's my reducer.js
file: 这是我的reducer.js
文件:
import React from 'react';
import * as actionTypes from '../action/NoNameAction';
const initialState = {
isModalOpen: false
};
const global = (state = initialState, action) => {
switch(action.type) {
case actionTypes.OPEN_MODAL:
return {
...state,
isModalOpen: true,
}
case actionTypes.CLOSE_MODAL:
return {
...state,
isModalOpen: false,
}
default:
return state;
}
};
export default global;
Here's my index.js
file: 这是我的index.js
文件:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import modalOpenReducer from './store/reducer/reducer';
const rootReducer = combineReducers({
isOpen: modalOpenReducer
});
const store = createStore(rootReducer);
ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root'));
registerServiceWorker();
将reducer文件名更改为global.js
然后在root.js中将其导入为global
而不是reducer。在组件中,也更改为this.props.isOpen
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.