Редуксу не удается прочитать карту свойств неопределенного - PullRequest
Новая
       8

Редуксу не удается прочитать карту свойств неопределенного

0 голосов
/ 28 октября 2018

Я пытаюсь получить некоторые данные через Redux и пытаюсь отобразить их в компоненте Fedp.js.Но я получаю ошибку в отображении.не могли бы вы сказать мне, где я иду не так во всем шаблоне?

productActions.js 

export function fetchProducts() {
  return function(dispatch) {
    dispatch({
      type: 'FETCH_PRODUCTS_REQUEST'
    });
    return fetch('/products')
      .then(response => response.json().then(body => ({ response, body })))
      .then(({ response, body }) => {
        if (!response.ok) {
          dispatch({
            type: 'FETCH_PRODUCTS_FAILURE',
            error: body.error
          });
        } else {
          dispatch({
            type: 'FETCH_PRODUCTS_SUCCESS',
            products: body.products
          });
        }
      });
    }
 }


productReducer.js 

const initialState = {
  products: []
};


export  function productsReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_PRODUCTS_REQUEST':
      return Object.assign({}, state, {
        isFetching: true
      });
    case 'FETCH_PRODUCTS_SUCCESS':
      return Object.assign({}, state, {
        isFetching: false,
        products: action.products
      });
    case 'FETCH_PRODUCTS_FAILURE':
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}


indexreducer.js: 

import { combineReducers } from 'redux';
import { productsReducer } from './productReducer';

export default combineReducers({
  products: productsReducer
});


configureStore.js 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/indexReducer';

function configureStore(initialState) {
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  );
}

export default configureStore


index.js 

import React from "react";
import ReactDOM from "react-dom";
import App from './App.js'
import configureStore from './Redux/store/configureStore';
import { Provider } from 'react-redux';



const store = configureStore();


ReactDOM.render( <Provider store={store}><App /></Provider>, document.getElementById('root'))


Fedp.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProducts } from '../Redux/actions/productAction';




class Fedp extends Component {

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


  render() { 
    return (
            <ul>
            {this.props.products.map((details, index)=>{
              <li key={item.id}> {details.name} + {details.price} </li>
        })}
          </ul>
    );
  }
}




function mapStateToProps(state) {
  return {
    products: state.products
  };
}


function mapDispatchToProps(dispatch) {
  return {
    fetchProducts: function() {
      dispatch(fetchProducts());
    }
  };
}




export default connect(mapStateToProps, mapDispatchToProps)(Fedp);

1 Ответ

0 голосов
/ 28 октября 2018

В методе mapStateToProps вы возвращаете значение state.products как products.Но state.products - это сам редуктор, а не массив результатов, которые вы извлекаете из вызова API.

В этом блоке ниже создается объект state, содержащий все ключи, упомянутые в параметрах combineReducers. 

export default combineReducers({
    products: productsReducer
});

Так что state.products - это не что иное, как ваш productsReducer какпоказано выше.Теперь значения, извлеченные из вызова API, сохраняются в ключе products внутри productsReducer.Следовательно, правильный способ доступа к этим значениям будет state.products.products.

Измените ваш mapStateToProps на приведенный ниже блок, и он будет работать. 

function mapStateToProps(state) {
    return {
        products: state.products.products
    };
}
...