Состояние не определено в mapStateToProps

Question

Я пытался получить новое состояние из функции моего редуктора vitaminReducer () и подключить его через mapStateToProps.Но когда я утешаю состояние .log, я возвращаюсь: «состояние {витамин: undefined}».

Это компонент Vitamins, где я вызываю 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);

(redurs.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,
  });

У меня есть данные, поступающие через сервер Express.Я записал в консоли «витамины» и получил данные обратно, так что я знаю, что это не проблема.

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

Если я это сделаю:{vitamin: state.vitamin,} "вместо« return {vitamin: state,} »я получаю сообщение« Ошибка типа: невозможно прочитать свойство 'vitamin' undefined ".Но это то, что я назвал vitaminReducer в моей функцииcellReducers () в нижней части файла redurs.js, поэтому я подумал, что это правильный путь.

Answer 1

Спасибо всем за ваш вклад!Я смог заставить его работать.

Я бросил mapStateToProps () и вместо этого сделал это

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

Я установил действие отправки внутрифункции fetchVitamins ()

(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';

В редукторах я установил initialState в массив витаминов и передал новое состояние micros.vitamins из моего действия RECEIVE_VITAMINS

(redurs.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,
});

Спасибо всем за помощь!Дайте мне знать, если у вас есть другие предложения: D