Javascript Redux状态未更新数组

我的redux有问题。这是我第一次在React中使用它。我已经成功地使用它来记录和注册用户。但是，我有一个在后端创建的对象数组，我正在使用axios获取该数组。Axios记录数据，my action creator也将数据记录在有效负载中。但是，它不会更新我的新状态。我不知道我做错了什么，因为我尝试了与登录和注册状态完全相同的方法，但是这些只是布尔值。我在谷歌上搜索了一个解决方案。我尝试映射新的数组、Object.assign和许多其他数组，但似乎无法使其正常工作。在状态中创建新数组有什么特殊方法吗？或者我可以把它分配给action.payload吗？我感谢所有的帮助

//store.js

import { applyMiddleware, createStore } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';

import reducer from './reducers/reducer';

const middleware = applyMiddleware(logger, thunk);

export default createStore(reducer, middleware);

//rootReducer.js

import { combineReducers } from 'redux';

import registerReducer from './registerReducer';
import loginReducer from './loginReducer';
import productsReducer from './products';

export default combineReducers({
  registerReducer,
  loginReducer,
  productsReducer
});

//我相信这里一定出了什么问题

import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/products';

const initialState = {
  productsList: []
};

const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_PRODUCTS: 
      return {...state, productsList: action.payload}
  }
  return state;
}

export default productsReducer;

//actions.js

import { SHOW_PRODUCTS, SELECT_PRODUCT } from './constants';

export function showProducts(products) {
  return {
    type: SHOW_PRODUCTS,
    payload: products
  };
}

//component.js

import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';

import ProductsList from './ProductsList';
import { showProducts }  from '../actions/products';


class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.getProducts(); 
  }

  render() {
    return(
      <div>Home Page
        <ProductsList />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    productsList: state.productsReducer.productsList
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    getProducts: () => {
      axios.get('http://localhost:5000/product/list')
      .then((res) => {
        console.log(res.data);
        dispatch(showProducts(res.data))
      })
      .catch(err => console.log(err))
    }
  }
}

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

我还包括一个链接到我的redux记录器的图像

这里可能有一个非常小、愚蠢的错误，因为我对反应非常陌生，对Redux也完全陌生

我相信MapStateTrops，您将要执行以下操作：

const mapStateToProps = (state) => {
    return {
        productsList: state.productsList
    };
}

要确认productsList是否已通过，是否可以向component.js的render函数添加一个简单的循环，如下所示：

render() {
    const { productsList } = this.props;
    return(
        <div>
            Home Page
            {productsList.map((product, index) => (
                <div key={index}>{product.PROPERTY_NAME_HERE}</div>
            ))}
        </div>
    )
}

---

我使用减速器的方式是

import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/products';

const initialState = {
  productsList: []
};

const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_PRODUCTS:
      let nextState = {...state};
      nextState.productsList = action.payload
      return nextState;
  }
  return state;
}

export default productsReducer;

---

您犯了一个错误，我不知道您是否是一个linter，但在productsReducer.js中，您正在从操作导入常量，而它应该是从常量导入的：

因此，您的减速器实际上不应采用正确的情况，因为它未定义，因此将返回初始状态。

请尝试以下方法：

componentWillMount() {
  this.getProducts(); 
}

getProducts() {
  axios.get('http://localhost:5000/product/list')
  .then((res) => {this.props.showProducts(res.data);})
  .catch(err => console.log(err));
}

const mapDispatchToProps = dispatch => ({
  showProducts: (data) => {
    dispatch(showProducts(data));
  },
});

---

还有几件事，你能详细说明一下这个.props.getProducts的用途吗；在component willmount lifecycle event of component.js中，您可能希望通过component.js呈现方法传递productsList：最后，您可以共享ProductList组件的代码吗？是的……目前没有任何内容……我一直无法更新我的状态，所以现在我在这个组件中呈现它。好的，this.props.getProducts的目的是在组件挂载时启动此函数。现在，您可以用一个简单的循环替换ProductList组件。为了确认productsList被正确检索，我添加了渲染方法代码作为示例谢谢，但是问题是redux在我的状态下返回了一个空数组。你能验证有效负载是否在productsReducer文件上有项吗？你有控制台吗？将操作记录在productsReducer中吗？我有一个名为actions的文件夹，在那里我也放置了常量文件，因此它被正确导入。我不知道，这可能是我整理文件的一种糟糕方式。如果你看我贴的链接。动作有效负载实际上从动作返回正确的数据。有效负载结果是我从错误的路径导入它…我浪费了一整天的时间试图找出它…只是为了第二天早上注意到它…谢谢你的帮助

componentWillMount() {
  this.getProducts(); 
}

getProducts() {
  axios.get('http://localhost:5000/product/list')
  .then((res) => {this.props.showProducts(res.data);})
  .catch(err => console.log(err));
}

const mapDispatchToProps = dispatch => ({
  showProducts: (data) => {
    dispatch(showProducts(data));
  },
});