javascript - 使用mapStateToProps时的React和Redux : why isn't my value not displaying from reducer,

Question

在我的React项目中，我连接了redux并添加了一个reducer，其中包含一个包含键和值对的对象:“key: 'hello'”。我将其导入到我的reducers文件夹中的index.js中，并尝试使用MapStateToProps在容器内使用它。无论出于何种原因，值(value)都没有显现出来!当我 console.log this.props.reducer 时，我返回了正确的对象，但是当我输入 this.props.reducer.key 时，我返回“未定义”。为什么会发生这种情况？我以前从来没有遇到过这个问题...

这是我的 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;

我的 reducer :

export default function() {
    return [
        {
            key: 'hello',
        }
    ]
}

我的index.js在reducers文件夹内

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);

我应该在屏幕上看到:“value: hello”，但我只看到显示“value:”

Answer 1

为什么你的reducer返回一个数组并且不接受任何参数？

通常，reducer 看起来有点像这样，所以它接受 2 个参数(第一个参数是应用程序的先前状态)并返回一个对象

const initialState = { key: 'not hello' };

expert default functions(prevState = initialState, value) {
   const newStateObject = { key: value };

   return newStateObject;
}