React redux mapStateToProps 未设置返回到我的道具

Question

Problem when using prop, it starts as null and then I use map but as it is null returns an error.

And then ends up not responding to the updated state:

class HomeProducts extends Component {

    componentDidMount() {
        this.props.fetchProduct();
      }
    render() {
        console.log(this.props)

      const productItems = this.props.products.map( product => (
          <div className="col-md-4 pt-4 pl-2">
          <div className = "thumbnail text-center"> 
          <a href={`#${product.id}`}  onClick={(e)=>this.props.handleAddToCard(e,product)}>
              <p>
                  {product.name}
              </p>
          </a>
          </div>
              <b>{util.formatCurrency(product.price)}</b>
              <button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
          </div>
      )
      )
        return (
            <div className="container">
            <div className="row">

            </div>  
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return{
        products: state.data.products,
        loading: state.data.loading,
        error: state.data.error
    }
  };
  const mapActionsToProps = {
    fetchProduct: fetchProduct
};
export default connect(mapStateToProps, mapActionsToProps)(HomeProducts);

my reducer:

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    products: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {

    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          ...state, products: action.data
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.error
        };
      default:
        return state;
    }
  }

my action:

import api from '../../services/api';
import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

const fetchSucess = data => ({
    type: FETCH_SUCESS,
    data

  });

  const fetchStarted = () => ({
    type: FETCH_LOADING
  });

  const fetchFailed = error => ({
    type: FETCH_FAIL, 
      error
  });

  export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

my combiner reducer:

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({
    data: productReducer 
});

my store:

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

And I got:

Cannot read property 'map' of undefined

Answer 1

Can you try like this without using initialState in createStore?

  return createStore(
        rootReducer,
        applyMiddleware(thunk)
    );

It seems that when we try to initialize the state both in createStore and reducer, something is broken.

Docs

Answer 2

It seems you need to check the initialState in your reducer, and see if you actually have an empty array for products . With that you do not have to deal with the cases where is empty in the very first load. So when having the initialState with [] , then you could also play around with different messages for the user, like (if array is empty, then either show LOADING (for cases when you also handle that state in your reducer) or EMPTY list when you actually finished loading the data.