React和Redux：为什么在使用mapStateToProps时我的值没有从reducer中显示出来

Question

In my react project, I've hooked up redux and added a reducer with an object that holds a key and value pair: "key: 'hello'". I imported it into my index.js in my reducers folder, and am trying to use it inside a container, using MapStateToProps. For whatever reason, the value isn't showing up! When I console.log this.props.reducer, I am returned the correct object, but when I type in this.props.reducer.key I'm returned 'undefined'. Why is this happening? I've never had this problem, before...

Here is my 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;

my reducer:

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

my index.js inside the reducers folder

import { combineReducers } from 'redux';
import firstReducer from './reducer.js';

const rootReducer = combineReducers({
    reducer: firstReducer
});

export default rootReducer;

my container:

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

I should see: 'value: hello' on my screen, but I just see 'value: ' displayed

Answer 1

why your reducer returns an array and doesn't accept any arguments?

usually the reducer looks somewhat like this, so it accepts 2 params (first one being the previous state of the app) and returns an object

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

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

   return newStateObject;
}

Answer 2

Your reducer is incorrect, you can set the initial state, and thereafter the function is either supposed to return the state unchanged, or the next state if it receives an action it's interested in.

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