Redux 未将获取的数组分配给状态变量

Question

我正在从后端获取一个数组，它可以工作，但是 redux 不知何故没有将数组分配给一个变量。 products in initialState 始终为空，如果我尝试在我的组件中引用它，它是 undefined。

RestActions：

const receivedProducts = (products) => ({
    type: "RECEIVED_PRODUCTS",
    products
})


export function getProducts() {
    return function(dispatch) {
        return axios({
            url: '/products',
            timeout: 20000,
            method: 'get'
        })
        .then(function(response) {
            let p = response.data;
            dispatch(receivedProducts(p));
        })
        .catch(function(error) {
            if(error.response) {
                // DEBUGGING
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        })
    }
};

我将reducer 放在store 中。这就是它的样子。

商店

const initialState = {

    // KEYBOARD
    searchWord: '',

    // BASKET
    basket:[],

    // PRODUCTS
    products: []
};
const reducer = (state = initialState, action) => {
    console.log('reducer', action);
    console.log('basket', state.basket);
    console.log('products', state.products)
    switch(action.type) {

        // REST
        case 'RECEIVED_PRODUCTS':
            return Object.assign({}, state, {products: action.products});
        ...

我的组件根据products 动态创建按钮并将它们呈现在网格中。每当我打电话给this.props.products.length 时，它都是未定义的。这是组件：

按钮

class ButtonsGrid extends React.Component {

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

    addProduct = (product) => {
        this.props.onButtonPress(product);
    }

    render() {   
        const {classes} = this.props;
        return (
            <div>
                <GridList cellHeight={50} cols={10}>
                    {this.props.list.length > 0 ? this.props.list.map(product => {
                        return (
                            <Button key={Math.random()} style={{width: '200px', border: '1px solid'}} variant="raised" color="primary" onClick={() => this.addProduct(product)}>
                                <div 
                                    style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                                        {product.name}
                                </div>
                            </Button>
                        );
                    }) : ''}
                </GridList>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        basket: state.basket,
        products: state.products
    }
}

const mapDispatchToProps = (dispatch) => {
    return { 
        onButtonPress: (data) => {
            let action = { type: 'PRODUCT_ADD', product: data };
            dispatch(action);
        },
        getProducts : function() {
            dispatch(getProducts());
        }
    };
}

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

然后它被App.js调用

App.js

<ButtonsGrid store={store} list={this.state.list} clicked={this.clicked}/>

所以，我可以console.log('reducer', action); 打印正确的内容，但我无法将数据分配给products。我试过this，但还是不行。

数据只是两个json对象。

感谢任何帮助！

Answer 1

传播state 对象

 return Object.assign({}, ...state, {
  products: [
    ...state.products,
    action.products
  ]
});