CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxmapstatetoprops
Apoorv
Apoorv

Reputation: 1

mapstatetoprops returning undefined react redux

I am getting the issue in mapStateToProps, it is showing undefined in the console.I have put console.log in app.js which shows loginval to be undefined. It is just a simple react redux code. I am not able to find my mistake . I have tried everything I know about it still it remains undefined.

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './redux/store';
import {Provider} from 'react-redux';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

app.js


import './App.css';
import React,{Component} from 'react';
import {Route,withRouter} from 'react-router-dom';
import {Provider,connect} from 'react-redux';



class App extends Component{

  render(){
    console.log(this.props.loginval);
    
    return (
        <div className="App">
          HELLO
        </div>
    );
  }
}
const mapStateToProps = state => {
  return {
      loginval:state.loginval
  };
};
export default connect(mapStateToProps)(App);

store.js

import {createStore} from 'redux';
import changeLogin from './reducer/loginValue';

const store=createStore(changeLogin,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

loginValue.js


const initialState={
    loginval:true
};

const changeLogin = (state=initialState,action) => {
    switch(action.type){
        case "Change": return !state.loginval;
        default: return state.loginval; 
    }
};

export default changeLogin;

action


    export const changelogin=()=>{
        return{
            type:"Change"
        }
    }

Upvotes: 0

Views: 125

Answers (1)

dylangrandmont
dylangrandmont

Reputation: 130

The reducer here needs to return the new state, but it is only returning a boolean value. I think you need something like

const changeLogin = (state=initialState,action) => {
    switch(action.type){
        case "Change": return {
          loginval: !state.loginval
        }
        default: return state; 
    }
};

Upvotes: 2

Related Questions