title: How to delete a specific element from an array in the redux store
body: <p>I am new to to redux and react. Still doing simple tutorials. I managed to create 2 simple components; one that outputs on the screen (as a list) whatever is in the array in the redux store, and the other component contains a button and a textfield which basically adds to that array in the store. </p>
  
  <p>I would like to add a feature that will enable me to delete a specific entry in the list depending on what the user clicked on. I am thinking of creating a <code>&lt;button&gt;</code> next to each <code>&lt;li&gt;</code> tag that gets rendered as it loops through the array, and these buttons will correspond to the respective list elements. But I'm not sure how to do that. </p>
  
  <p>I've tried creating a button when each <code>&lt;li&gt;</code> tag gets created but I was getting an error on the console stating that each element in a list needs a unique ID. I then decided to create another array in my store called <code>buttons</code> which will contain a unique id as well as the id of the list but it got out of hand. I think I might be overcomplicating this. This is what I have at the moment:</p>
  
  <p>Components:
  List.jsx (responsible for outputting the list)</p>
  
  <pre><code>import React from 'react'
  import { connect } from "react-redux";
  
  const ListComp = ({ lists }) =&gt; (
      &lt;div&gt;    
          &lt;ul&gt;
              {console.log(lists)}
              {lists.map( element =&gt; (
                      &lt;li key={element.id}&gt;
                          {element.titleToBeAddedToList}
                      &lt;/li&gt;
              ))}
          &lt;/ul&gt;
      &lt;/div&gt;
  )
  
  const mapStateToProps = state =&gt; {
      return {
          lists: state.lists
      };
  }
  const List = connect(mapStateToProps)(ListComp)
  
  export default List;
  </code></pre>
  
  <p>SubmitButton.jsx (responsible for outputting the button and textfield)</p>
  
  <pre><code>import React from 'react'
  import { connect } from "react-redux";
  import uuidv1 from "uuid";
  import { addList } from "../actions/index";
  import { addButton } from "../actions/index"
  
  function mapDispatchToProps(dispatch){
      return {
          addlist: article =&gt; dispatch(addList(article)),
          addbutton: idOfButton =&gt; dispatch(addButton(idOfButton))
        };
  }
  
  class Submit extends React.Component{
  
      constructor(){
          super();
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);        
      }
  
      handleChange(event) {
          this.setState({ [event.target.id]: event.target.value });
      }
  
      handleSubmit(event) {
          event.preventDefault();
          const {titleToBeAddedToList} = this.state;
          const id = uuidv1();
          const button_id = uuidv1();
          //Dispatching the action:
          this.props.addlist({ titleToBeAddedToList, id });
          this.props.addbutton({id, button_id});        
          //Once we've dispatched an action, we want to clear the state:
          this.setState({ titleToBeAddedToList: "" });
      }
  
      render() {
          return (
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;div className="form-group"&gt;
                &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  id="titleToBeAddedToList"
                  onChange={this.handleChange}
                /&gt;
              &lt;/div&gt;
              &lt;button type="submit" className="btn btn-success btn-lg"&gt;
                SAVE
              &lt;/button&gt;
            &lt;/form&gt;
          );
        }
  }
  
  const SubmitButton = connect(null, mapDispatchToProps)(Submit)
  
  export default SubmitButton;
  </code></pre>
  
  <p>Reducers:</p>
  
  <pre><code>const initialState = {
  lists: [],
  buttons: []
  };
  
  function rootReducer (state = initialState, action) {
      if(action.type === "ADD_LIST" ){
          return Object.assign({}, state, {
              lists: state.lists.concat(action.payload)
            });
      } else if(action.type === "ADD_BUTTON"){
          return Object.assign({}, state, {
              buttons: state.lists.concat(action.payload)
            });
      } else if(action.type === "DELETE_FROM_LIST"){
          //.....//
      }
      return state;
  }
  
  export default rootReducer;
  </code></pre>
  
  <p>Action:</p>
  
  <pre><code>    export function addList(payload) {
      return { type: "ADD_LIST", payload }
  };
  
  export function addButton(payload){
    return {type: "ADD_BUTTON", payload }
  }
  
  export function deleteList(payload){
    return { type: "DELETE_FROM_LIST", payload }
  }
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>import { createStore } from "redux";
  import rootReducer from "../reducers/index";
  
  const store = createStore(rootReducer);
  
  export default store;
  </code></pre>