Доступ к Reducer в контейнере возвращает неопределенный - PullRequest
Новая
       7

Доступ к Reducer в контейнере возвращает неопределенный

0 голосов
/ 26 ноября 2018

Я просто хотел интегрировать новый контейнер в свое приложение React, связал его с Redux и просто хотел убедиться, что все работает.Это не однако.доступ к редуктору через this.props.selection дает мне undefined.Я не знаю почему.Он работает в других контейнерах, и редуктор имеет некоторое четко определенное начальное состояние.- Я не уверен, что вижу, какая здесь разница?Я что-то упускаю из виду? 

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: я несколько упростил этот компонент, но думаю, что он все равно должен отражать проблему.

edit: пример редуктора люди просили увидеть редуктор, однако, я пробовал это с несколькими редукторами, которые уже реализованы в приложении и работают в других контейнерах, поэтому я не думаю, что именно в этом проблема - но кто знает:

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, похоже, вообще не вызывается Я просто попытался сделать console.log в mapStateToProps, чтобы увидеть, вызывается ли он, и кажется, что он никогда не вызывается.,Ничто никогда не регистрируется.В чем может быть причина этого? 

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

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

Я также добавил еще один редуктор (auth), который работает в другом месте приложения, но здесь возвращает неопределенное значение.

edit3: My RootРедуктор 

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;

Ответы [ 3 ]

0 голосов
/ 26 ноября 2018

Можете ли вы попробовать удалить 'export' из 'класса экспорта AudioPlayer extends Component'

, вы также можете проверить это: mapStateToProps вообще не вызывается

0 голосов
/ 26 ноября 2018

1) В вашей отладке, пожалуйста, проверьте, что вводит точный регистр в редуктор, чтобы он понимал action.type == SELECT_ITEM и возвращал новое состояние.

2)Также обратите внимание на выделение объекта, который содержит «выделенный» внутри него.Ваш редуктор ' selection ' содержит: {... состояние, ошибка: '', selected : true}

возможно, в этом есть путаница?

0 голосов
/ 26 ноября 2018

Код вашего компонента в порядке.

В вашем редукторе он должен быть 

export default function(state = { selected: false }, action) {

Дополнительная информация:

...