CODEWITHSUNDEEP
javascriptreactjsdebuggingreduxreact-redux
sp92
sp92

Reputation: 987

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. But I'm sure I've defined it properly inside index.js file. 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.

Here's my List.js file:

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:

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:

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

Upvotes: 0

Views: 55

Answers (1)

CodeZombie
CodeZombie

Reputation: 2087

change the reducer file name to global.js and in the root.js import it as global instead of reducer.And also in the component,change to this.props.isOpen

Upvotes: 1

Related Questions