Delete item from array in Redux

Question

I am new to Redux and looking for a way to remove a JSON object from an existing array in Redux. I've tried several methods but none of them worked. The code for a reducer is below:

const initialState = {serviceList: [{name: 'Ancestome', connectedAt: '08/03/2020'},{name: '23AndMe', connectedAt: '09/03/2020'},{name: 'Cancer Research UK', connectedAt: '09/03/2020'}]}


const serviceReducer = (state = initialState, action) => {
  let serviceList = [...state.serviceList]
  switch (action.type) {

    case DELETE_SERVICE:
        delete serviceList[action.id]

      return {
        ...state,   
        serviceList: serviceList
      };

    default:
      return state
  }
}

export default serviceReducer

File service.js

class Services extends React.Component {
  constructor(props) {
    super(props);
    this.addNewEle = false;
    this.state = {disabled: false};

  }

  afterAnimationComplete = () => {
        this.setState({ disabled: false });
      }


  deleteFromService = (id) => {

    this.props.deleteService(id);

    this.addNewEle = false;


    this.setState({disabled: false});
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

  }      
      render() {

        return (
          <View style={styles.container} >
               <Header
              placement="left"
              centerComponent={{ text: 'Service', style: { color: '#fff', fontSize: 24 } }}          
             />
            <ScrollView
              ref={scrollView => this.scrollView = scrollView}
              onContentSizeChange={() => {
                this.addNewEle && this.scrollView.scrollToEnd();
              }}
            >
              <View style={{ flex: 1, padding: 4 }}>
                {Object.keys(this.props.serviceList).map((id) => {
                  return (


                    <ServiceItem
                      key={id}
                      id={id}
                      item={this.props.serviceList[id]}
                      removeItem={(id) => this.deleteFromService(id)}
                      afterAnimationComplete={this.afterAnimationComplete}
                    />
                  )
                })}
              </View>
            </ScrollView>


          </View>
        );
      }
}

const styles = StyleSheet.create(
    {
      container: {
        flex: 1,
      },
      title: {
        backgroundColor: 'transparent',
        color: 'black',
        fontSize: 24,
        paddingLeft: 10,
        paddingTop: 50,
      }
    });

  const mapStateToProps = (state) => ({ serviceList: state.serviceReducer.serviceList });

  const mapDispatchToProps = (dispatch) => ({
        deleteService: (serviceItem) => {
            dispatch(deleteService(serviceItem));
        },
    });

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

In the code above, it works if I delete one entry from the array but failed for the second try. For example, I delete the first one (id = 0) then two entries remained (id = {1,2}). Now if I continue to delete the second entry (id = 1) for example, it did not delete this entry and strangely it returned two entries (id = {0,2})!!! and the similar thing occurred when I tried to remove the last entry.

I've tried the code below too:

let newList = serviceList.slice(0, action.id).concat(serviceList.slice(action.id + 1));

     return {
        ...state,   
        serviceList: newList
      };

However, if I delete the first one then it would delete the first and the last one!!!

I have no idea what was going on and would be very appreciate if someone can suggest a correct solution. Thanks

Answer 1

Thanks everyone. I've found out that there had been a problem with my animated list view rather than the issue with reducer itself. The issue is closed now.

Answer 2

If id represents the index of the element in the servicesList you can than delete certain element using filter method of the array.

Your delete method would look like this then:

case DELETE_SERVICE:
  delete serviceList[action.id]

  return {
    ...state,   
    serviceList: serviceList.filter((e, index) => index !== action.id)
  };

This code will filter element which index is equal to the id from the action object.