在我的反应项目中,我已经连接了redux并添加了一个带有一个键和值对的对象的减速器:" key:' hello'"。我将它导入我的reducers文件夹中的index.js,并尝试使用MapStateToProps在容器内使用它。无论出于何种原因,价值都不会出现!当我在console.log this.props.reducer时,我返回了正确的对象,但是当我输入this.props.reducer.key时,我返回了“未定义的”#39;。为什么会这样?我之前从未遇到过这个问题......
这是我的App.js
import React, { Component } from 'react';
import FirstComponent from './components/firstComponent.js';
import FirstContainer from './containers/firstContainer.js';
class App extends Component {
render() {
return (
<div className="App">
<FirstComponent />
<FirstContainer />
</div>
);
}
}
export default App;
我的减速机:
export default function() {
return [
{
key: 'hello',
}
]
}
我在reducers文件夹中的index.js
import { combineReducers } from 'redux';
import firstReducer from './reducer.js';
const rootReducer = combineReducers({
reducer: firstReducer
});
export default rootReducer;
我的容器:
import React from 'react';
import { connect } from 'react-redux';
class FirstContainer extends React.Component {
render() {
return(
<div>
value: {this.props.reducer.key}
</div>
);
}
}
function mapStateToProps(state) {
return {
reducer: state.reducer
};
}
export default connect(mapStateToProps)(FirstContainer);
我应该看到:&#39;价值:你好&#39;在我的屏幕上,但我只是看到了价值:&#39;显示
答案 0 :(得分:1)
为什么你的reducer返回一个数组并且不接受任何参数?
通常reducer看起来有点像这样,所以它接受2个params(第一个是应用程序的先前状态)并返回一个对象
const initialState = { key: 'not hello' };
expert default functions(prevState = initialState, value) {
const newStateObject = { key: value };
return newStateObject;
}
答案 1 :(得分:1)
你的reducer不正确,你可以设置初始状态,然后该函数应该返回状态不变,或者如果它接收到它感兴趣的动作则返回下一个状态。
const initialState = { key: 'hello'};
export default function(state = initialState, action) {
switch (action.type) {
// dispatch({ type: 'UpdateKey', value: 'new value' })
case 'UpdateKey': {
return {
...state,
key: action.value,
};
}
}
return state;
}