访问容器中的 Reducer returns undefined
Accessing Reducer in container returns undefined
我只是想在我的 React 应用程序中集成一个新的容器,将它与 Redux 连接起来,只是想看看它是否一切正常。然而事实并非如此。通过 this.props.selection
访问减速器给我 undefined
。我不知道为什么。它确实在其他容器中工作,并且 reducer 具有一些定义明确的初始状态。 - 我不确定我看到这里有什么区别?我是不是遗漏了一些微不足道的东西?
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:这个部分我简化了一些,但我觉得应该还是能反映出问题。
编辑:reducer 示例
人们要求查看减速器,但是,我已经在应用程序中已经实现并在其他容器中工作的几个减速器上进行了尝试,所以我认为这不是问题所在 - 但谁知道呢:
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 似乎根本没有被调用
我只是试图在 mapStateToProps 中做一个 console.log,看看它是否被调用,但似乎它从来没有被调用过。什么都没有记录。这可能是什么原因?
function mapStateToProps (state) {
console.log("In map function");
console.log(state);
return {
selection: state.selection, //both return
auth: state.auth // undefined
};
}
我还添加了另一个减速器 (auth),它可以在应用程序的其他地方工作,但这里 returns 未定义。
edit3:我的 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;
你的组件代码没问题。
在你的reducer中它应该是
export default function(state = { selected: false }, action) {
延伸阅读:
您可以尝试从 'export class AudioPlayer extends Component'
中删除 'export'
你也可以检查这个:
1) 在您的调试中,请检查它 在减速器中输入确切的大小写 ,它理解 action.type == SELECT_ITEM,并且 returns新状态。
2) 还要注意 selection 是一个对象,里面包含 'selected' 。
您的“selection”reducer 包含:{...state, error:'', selected: true}
也许对此有误解?
我只是想在我的 React 应用程序中集成一个新的容器,将它与 Redux 连接起来,只是想看看它是否一切正常。然而事实并非如此。通过 this.props.selection
访问减速器给我 undefined
。我不知道为什么。它确实在其他容器中工作,并且 reducer 具有一些定义明确的初始状态。 - 我不确定我看到这里有什么区别?我是不是遗漏了一些微不足道的东西?
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:这个部分我简化了一些,但我觉得应该还是能反映出问题。
编辑:reducer 示例 人们要求查看减速器,但是,我已经在应用程序中已经实现并在其他容器中工作的几个减速器上进行了尝试,所以我认为这不是问题所在 - 但谁知道呢:
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 似乎根本没有被调用 我只是试图在 mapStateToProps 中做一个 console.log,看看它是否被调用,但似乎它从来没有被调用过。什么都没有记录。这可能是什么原因?
function mapStateToProps (state) {
console.log("In map function");
console.log(state);
return {
selection: state.selection, //both return
auth: state.auth // undefined
};
}
我还添加了另一个减速器 (auth),它可以在应用程序的其他地方工作,但这里 returns 未定义。
edit3:我的 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;
你的组件代码没问题。
在你的reducer中它应该是
export default function(state = { selected: false }, action) {
延伸阅读:
您可以尝试从 'export class AudioPlayer extends Component'
中删除 'export'你也可以检查这个:
1) 在您的调试中,请检查它 在减速器中输入确切的大小写 ,它理解 action.type == SELECT_ITEM,并且 returns新状态。
2) 还要注意 selection 是一个对象,里面包含 'selected' 。 您的“selection”reducer 包含:{...state, error:'', selected: true}
也许对此有误解?