React和Redux:当使用mapStateToProps时,为什么我的值不是从reducer中显示的

时间:2018-03-06 14:18:29

标签: javascript reactjs redux react-redux state

在我的反应项目中,我已经连接了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;显示

2 个答案:

答案 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;
}