状态在mapStateToProps中未定义

Question

I've been trying to retrieve the new state from my vitaminReducer() reducer function, and connect it through mapStateToProps. But when I console.log the state, I get back "the state is {vitamin: undefined}".

This is the Vitamins component where I'm calling mapStateToProps() (Vitamins.js)

  componentDidMount() {
     this.props.fetchVitamins();
   }

  function mapStateToProps(state) {
     return {
      vitamin: state,
     }
  };

  console.log('the state is', mapStateToProps());

  export default connect(mapStateToProps, { fetchVitamins })(Vitamins);

(reducers.js)

 function vitaminReducer(state = [], action) {
   switch(action.type) {
    case FETCH_VITAMINS_SUCCESS:
      return [
        ...state,
        action.payload.vitamins
      ];
     default:
       return state;
    }
  }


  const reducers = combineReducers({
    vitamin: vitaminReducer,
  });

I have the data coming through an Express server. I've console logged "vitamins" here and I get the data back, so I know that's not the issue.

(actions.js)

 export function fetchVitamins() {
   return dispatch => {
     return fetch("/users")
       .then(handleErrors)
       .then(res => res.json())
       .then(micros => {
          dispatch(fetchVitaminsSuccess(micros));
          const vitamins = micros.vitamins;
        }
     )};
  };

  export const FETCH_VITAMINS_SUCCESS = 'FETCH_VITAMINS_SUCCESS';

  export const fetchVitaminsSuccess = vitamins => ({
    type: FETCH_VITAMINS_SUCCESS,
    payload: vitamins
  });

If I do: "return { vitamin: state.vitamin, }" instead of "return { vitamin: state, }", I get back "TypeError: Cannot read property 'vitamin' of undefined". But that's what I called vitaminReducer in my combineReducers() function at the bottom of reducers.js, so I thought that was the right way to do it.

Answer 1

Thank you everyone for your input! I was able to get it working.

I ditched the mapStateToProps() and instead did this

(Vitamins.js)

  componentDidMount() {
    this.props.fetchVitamins();
  }

  renderData() {
   const { vitamins } = this.props.vitamins;
    return vitamins.map((micro, index) => {
      return (
        <option value={micro.value} key={index}>{micro.name}</option>
      )
    })
  }

  export default connect(
   state => ({
     vitamins: state.vitamins
   }),
   {
    fetchVitamins
   },
   )(Vitamins);

I set the dispatch action inside of the fetchVitamins() function

(actions.js)

  export function fetchVitamins() {
   return dispatch => {
      return fetch("/users")
       .then(handleErrors)
       .then(res => res.json())
       .then(micros => {
         dispatch({
           type: "RECEIVE_VITAMINS",
           payload: micros.vitamins
         });
        }
     )};
   };

   export const RECEIVE_VITAMINS = 'RECEIVE_VITAMINS';

In reducers I set the initialState to the vitamins array, and passed the new state of micros.vitamins from my RECEIVE_VITAMINS action

(reducers.js)

  const initialState = {
    vitamins: [],
  }

 function vitaminReducer(state = initialState, action) {
   switch(action.type) {
     case RECEIVE_VITAMINS:
      return {
        ...state,
        vitamins: action.payload
      };
  default:
     return state;
  }
}


const reducers = combineReducers({
   vitamins: vitaminReducer,
});

Thanks everyone for your help! Let me know if you have any other suggestions :D