javascript - Redux 状态不更新数组

Question

我的 redux 有问题。这是我第一次在 React 中使用它。我已经成功地使用它来记录和注册用户。但是，我在后端创建了一个对象数组，我正在使用 axios 获取这些对象。 Axios 记录数据，我的 Action 创建者也在负载中记录数据。但是，它不会更新我的新状态。我不知道我做错了什么，因为我尝试的方式与我的登录和注册状态完全相同，但是这些只是 bool 值。我用谷歌搜索并寻找解决方案。我尝试映射新数组、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
});

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

//组件.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 记录器添加了指向图像的链接。

/image/bTnYh.png

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

Answer 1

你有一个错误，我不知道你是否是linter，但在productsReducer.js中，你正在从actions导入常量当它应该来自常量时:

import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/constants'; // <- from constants instead

const initialState = {
  productsList: []
};

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

export default productsReducer;

因此，您的reducer实际上不应该采用正确的case，因为它是未定义，因此它将返回初始状态。