Redux未將獲取的數組分配給狀態變量

Question

我正在從后端獲取一個數組，它可以工作，但是redux某種程度上沒有將數組分配給變量。 initialState products始終為空，如果我嘗試在組件中引用它，則它是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 。 我試着做這個 ，但它仍然沒有奏效。

數據只是兩個json對象。

任何幫助表示贊賞！

Answer 1

傳播state對象

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