Search code examples
javascriptreactjsreduxreact-reduxflux

Accessing Reducer in container returns undefined


I just wanted to integrate a new Container in my React App, wired it up with Redux and just wanted to see it's all working. It's not however. accessing the reducer via this.props.selection gives me undefined. I don't know why. It does work in other containers, and the reducer has some well-defined initial state. - I'm not sure I see what the difference is here? Am I missing something trivial?

import React, { Component } from 'react'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

export class AudioPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = { someComponentState : true }
  }

  onLog() {
    console.log("Logging:");
    console.log(this.props.selection); // gives me: undefined
  }
  render() {    
    return (
      <div>
           <button onClick={()=> this.onLog()}>LOG</button>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {
    selection: state.selection
  };
}

export default connect(mapStateToProps)(AudioPlayer);

PS: I've simplified this component somewhat, but I think it should still reflect the problem.

edit: reducer example people have asked to see the reducer, however, I've tried this with several reducers that are already implemented in the app and are working in other containers, so I don't think this is where the problem lies - but who knows:

import { SELECT_ITEM } from '../actions/types';

export default function(state = {}, action) {
  switch(action.type) {
    case SELECT_ITEM: 
      return {...state, error:'', selected: true};
  }

  return state;
}

edit2: mapStateToProps does not seem to be called at all I just tried to do a console.log in mapStateToProps, to see if it's called, and seems that it never is. Nothing is ever logged. What could be the reason for this?

function mapStateToProps (state) {
    console.log("In map function");
    console.log(state);

  return {
    selection: state.selection, //both return
    auth: state.auth            // undefined
  };
}

I also added another reducer (auth) which works elsewhere in the app, but here returns undefined.

edit3: My Root Reducer

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';

//reducer imports
import authReducer from './auth_reducer';
import articlesReducer from './articles_reducer';
import userReducer from './user_reducer';
import currentSelectionReducer from './currentSelection_reducer';

const rootReducer = combineReducers({
  auth: authReducer,
  user: userReducer,
  articles: articlesReducer,
  selection: currentSelectionReducer,
});

export default rootReducer;

Solution

  • Can you try removing 'export' from 'export class AudioPlayer extends Component'

    you can also check this: mapStateToProps not getting called at all