CODEWITHSUNDEEP
javascriptreactjsreact-redux
Awelle
Awelle

Reputation: 42

Cant access store with mapStateToProps

Im new to react, I'm trying to setup the login system with redux. In my Login component I'm using mapStateToProps with the connect method that react-redux offers.

When I tried to get what I needed from the store It kept saying that it was undefined. This is a snippet of my Login component:

function mapStateToProps(state) {
  return {
    loggingIn: state.authentication.loggedIn,


  };
}

function mapDispatchToProps(dispatch) {
  return {
     actions: bindActionCreators(userActions, dispatch),
     alertActions: bindActionCreators(alertActions, dispatch),

  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Here's how I tried to combine reducers:

import { combineReducers } from 'redux';
import authentication from './userReducer';
import alert from './alertReducer'

    const rootReducer = () => combineReducers({
        authentication,
        alert
    });

    export default rootReducer;

However I couldn't access the logginIn props in the Login component. After trouble shooting for some frustrating hours I got it to work by removing the arrow function to this:

const rootReducer = combineReducers({

Can someone tell me why the arrow function didn't work? Thanks

Update: Here's how I imported the root reducer in the index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import rootReducer from './reducers'

const store = createStore(rootReducer, applyMiddleware(thunk));


  ReactDOM.render(

  <Provider store={store}>

    <App />
  </Provider>, document.getElementById('root'))



// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

Upvotes: 0

Views: 161

Answers (2)

Daniel
Daniel

Reputation: 15433

In addition to Vinicius' answer, you can refactor your combineReducers() call even more.

Instead of:

const rootReducer = () => combineReducers({
     authentication,
     alert
});

export default rootReducer;

which I have seen others do before, I guess personally the less code I need to write the cleaner, as long as it doesn't become esoteric looking, anyway just write it like this:

export default combineReducers({
  authentication,
  alert
});

You export and call the combineReducers() all in one go. Oh and to import it, since we removed rootReducer just do:

import reducers from "./reducers";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducers,
  composeEnhancers(applyMiddleware(reduxThunk))
);

Upvotes: 0

Vinicius
Vinicius

Reputation: 1365

The docs tells you to call combineReducers to provide the root reducer. The createStore method expects a reducer, not a function to call to get this reducer.

Upvotes: 1

Related Questions