javascript - React redux mapStateToProps 未设置返回到我的 props

Question

使用 prop 时出现问题，它以 null 开头，然后我使用 map 但因为它是 null 返回错误。

然后最终不响应更新的状态:

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

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

我的行动:

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

我的组合器 reducer :

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

export default combineReducers({
    data: productReducer 
});

我的商店:

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

我得到了:

Cannot read property 'map' of undefined

Answer 1

你可以尝试这样而不在createStore中使用initialState吗？

  return createStore(
        rootReducer,
        applyMiddleware(thunk)
    );

似乎当我们尝试在 createStore 和 reducer 中初始化状态时，有些东西被破坏了。

Docs