React Native Redux action not updating store array

Question

I am currently working on an e-commerce application. I am using a method I previously learned in another project where I used a button to mark a certain menu item as favourite within the redux store.

In this project I am trying to add the product id to the my orders array within the store. Then show a list of products with the same ids on my cart page. When looking at the output on the log it shows my payload is the correct product id but next state does not update.

I have only included the relevant code for readability.

orders.js

import * as ActionTypes from './ActionTypes';

export const orders = (state = [], action) => {
    switch (action.type) {
        case ActionTypes.ADD_ORDER:
            return state.concat(action.payload);

        default:
            return state;
    }
}

ActionTypes.js

export const POST_ORDER = 'POST_ORDER';
export const ADD_ORDER = 'ADD_ORDER';
export const REMOVE_ORDER = 'REMOVE_ORDER';

ActionCreators.js

export const postOrder = (productId) => (dispatch) => {

    setTimeout(() => {
        dispatch(addOrder(productId));
    }, 2000);
};

export const addOrder = (productId) => ({
    type: ActionTypes.ADD_ORDER,
    payload: productId
});

export const removeOrder = (productId) => ({
    type: ActionTypes.REMOVE_ORDER,
    payload: productId
});

CartComponent.js

import React, { Component } from 'react';
import { FlatList, View, Text, Alert } from 'react-native';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';
import { Loading } from './LoadingComponent';
import { removeOrder } from '../redux/ActionCreators';


const mapStateToProps = state => {
    return {
        products: state.products,
        orders: state.orders
    }
}

const mapDispatchToProps =  dispatch => ({
    removeOrder: (productId) => dispatch(removeOrder(productId))
});

class CartScreen extends Component {
    
    render() {

        const renderMenuItem = ({item, index}) => {
            return(
               <ListItem 
                    key={index}    
                    bottomDivider
                >
                   <Avatar source={{uri: baseUrl + item.image}}/>
                   <ListItem.Content>
                        <ListItem.Title>
                            {item.name}
                        </ListItem.Title>
                        <ListItem.Subtitle>
                            {item.description}
                        </ListItem.Subtitle>
                   </ListItem.Content>
                   
               </ListItem>
            );
        }
        if (this.props.products.isLoading) {
            return(
                <Loading />
            )
        }
        else if (this.props.products.errMess) {
            return(
                <Text>{this.props.products.errMess}</Text>
            )
        }
        else {
            return(
            <View>
                <Text>
                    Cart
                </Text>
                <FlatList
                    data={this.props.products.products.filter(product => this.props.orders.some(el => el === product.id))}
                    renderItem={renderMenuItem}
                    keyExtractor={item => item.id.toString()}
                />
            </View>

            );

        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(CartScreen);

Answer 1

Thanks for the contributions everyone.

I actually tried running it again bit later after turning off my debugger and it worked. I checked my git history and I hadn't made any changes so not sure how it works now. As seen in the image below, the orders array is now populated by the product id.

Answer 2

Concat will not work in this case, you need to use the spread operator, like below:

export const orders = (state = [], action) => {
    switch (action.type) {
        case ActionTypes.ADD_ORDER:
            return { ...state, nameOfTheAttributeYouWantToChangeInYourReducer: action.payload };

        default:
            return state;
    }
}