title: Why local state also changed when redux store updated
body: <p>Now I'm building an application using react redux store and local store.
  I have two components &quot;tweetTable_Comp&quot; and &quot;likeButton_Comp&quot;.
  The redux store has all the tweets record &quot;tweets&quot; fetched by an API, and tweetTable_Comp has a local state &quot;filteredTweets&quot; so as to add filter function later and show only selected genre tweets.</p>
  <p>And every tweet has likingUserIds.
  tweetTable_Comp passes likingUserIds as props to likeButton_Comp so that it can add different style depending on if you already liked the tweet or not.</p>
  <p>The problem here is that changing the &quot;tweets[indexNum].likingUserIds&quot; in the redux store when user push like button also affects on the local state &quot;filteredTweets[indexNum].likingUserIds&quot;.</p>
  <p>I was gonna change the redux info and local state info one by one like in deleteTweet function which already works well.
  But this is not intentionally working.</p>
  <p>Can anyone teach me why this is happening?</p>
  <p>here is reducer.js
  redux tweets has objects as below</p>
  <p>・title(string)
  ・text(string)
  ・createdDate(string)
  ・likingUserIds(array)
  ・userId(number)</p>
  <pre><code>const defaultState = {
    user: {
      loggedIn: false,
      id: 0,
      account: ''
    },
    tweets: []
  }
  
  export default function reducer(state = defaultState, action) {
    switch (action.type) {
      case 'UPDATE_TWEETS':
       return {
         ...state,
         tweets: action.tweets
       }
      default:
        return state;
    }
  }
  </code></pre>
  <p>here is actions.js</p>
  <pre><code>export function getTweets(tweets){
    return {
      type: 'UPDATE_TWEETS',
      tweets: tweets
    }
  }
  </code></pre>
  <p>here is tweetTable_Comp</p>
  <pre><code>class TweetTable_Comp extends Component{
    constructor(props){
      super(props)
      const {dispatch} = props;
      this.action = bindActionCreators(actions, dispatch);
      this.deleteButtonClicked = this.deleteButtonClicked.bind(this)
      this.editButtonClicked = this.editButtonClicked.bind(this)
      this.handleChanged = this.handleChanged.bind(this)
      this.state = {
        filteredTweets: [],
        searchWord: &quot;&quot;
      }
    }
  
    handleChanged(e){
      this.setState({[e.target.name]: e.target.value})
    }
  
    deleteButtonClicked(id, index){
      confirm(&quot;削除しますか？&quot;) &amp;&amp;
      this.deleteTweet(id, index)
    }
  
    editButtonClicked(id){
      this.props.history.push(&quot;/edit/&quot; + id)
    }
  
    deleteTweet(id, index){
      fetch(&quot;http://localhost:8080/twitter/deleteTweet/&quot; + id, {
        method: &quot;DELETE&quot;
      })
      .then((response) =&gt; {
        if(response.status === 200) {
          const newList = this.props.tweets.slice()
          newList.splice(index, 1)
          this.action.getTweets(newList)
          this.setState({filteredTweets: newList})
        }
      })
    }
  
  
    componentDidMount(){
      fetch(&quot;http://localhost:8080/twitter/sendAllTweets&quot;, {
        method: &quot;GET&quot;
      })
      .then((response) =&gt; {
        response.json()
        .then(json =&gt; {
          this.action.getTweets(json)
          this.setState({filteredTweets: json.slice()})
        })
      })
    }
  
    render(){
      return(
        &lt;&gt;
          &lt;h1 className=&quot;text-center&quot;&gt;tweet一覧&lt;/h1&gt;
          &lt;SearchBar searchWord={this.state.searchWord} handleChanged={this.handleChanged}/&gt;
          &lt;Container&gt;
            &lt;Row&gt;
              &lt;Col&gt;
                &lt;br/&gt;
                &lt;br/&gt;
                &lt;Table striped bordered hover&gt;
                  &lt;thead&gt;
                    &lt;tr className=&quot;text-center&quot;&gt;
                      &lt;th&gt;投稿日&lt;/th&gt;
                      &lt;th&gt;投稿者&lt;/th&gt;
                      &lt;th&gt;タイトル&lt;/th&gt;
                      &lt;th&gt;内容&lt;/th&gt;
                      &lt;th&gt;いいね&lt;/th&gt;
                      &lt;th&gt;削除&lt;/th&gt;
                      &lt;th&gt;編集&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    { this.state.filteredTweets.map((tweet, index) =&gt; (
                      &lt;tr key={tweet.id}&gt;
                        &lt;td className=&quot;text-center&quot;&gt;{tweet.createdDate}&lt;/td&gt;
                        &lt;td className=&quot;text-center&quot;&gt;{tweet.user.account}&lt;/td&gt;
                        &lt;td&gt;{tweet.title}&lt;/td&gt;
                        &lt;td&gt;{tweet.text}&lt;/td&gt;
                        &lt;td className=&quot;text-center&quot;&gt;
                          &lt;LikeButton likingUserIds={tweet.likingUserIds} index={index} id={tweet.id} /&gt;
                        &lt;/td&gt;
                        &lt;td className=&quot;text-center&quot;&gt;
                          &lt;Button variant=&quot;outline-secondary&quot; onClick={() =&gt; this.deleteButtonClicked(tweet.id, index)}&gt;
                            &lt;FontAwesomeIcon icon={faTrashAlt} /&gt;
                          &lt;/Button&gt;
                        &lt;/td&gt;
                        &lt;td className=&quot;text-center&quot;&gt;
                          &lt;Button variant=&quot;outline-secondary&quot; onClick={() =&gt; this.editButtonClicked(tweet.id)}&gt;
                            &lt;FontAwesomeIcon icon={faEdit} /&gt;
                          &lt;/Button&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
                    ))
                    }
                  &lt;/tbody&gt;
                &lt;/Table&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/&gt;
      )
    }
  }
  
  TweetTable_Comp.propTypes = {
    dispatch: PropTypes.func,
    tweets: PropTypes.array,
    history: PropTypes.object,
    user:PropTypes.object
  }
  
  function mapStateToProps(state){
    return state
  }
  
  export default withRouter(connect(mapStateToProps)(TweetTable_Comp))
  </code></pre>
  <p>here is likeButton_Comp</p>
  <pre><code>class LikeButton_Comp extends Component {
    constructor(props){
      super(props)
      const {dispatch} = props
      this.action = bindActionCreators(actions, dispatch)
      this.likeButtonClicked = this.likeButtonClicked.bind(this)
    }
  
    likeButtonClicked(func, index){
      const data = {
        userId:this.props.user.id,
        tweetId:this.props.id
      }
      if(func === &quot;unlike&quot;){
        fetch(&quot;http://localhost:8080/twitter/like&quot;, {
          method: &quot;DELETE&quot;,
          body: JSON.stringify(data)
        })
        .then((response) =&gt; {
            if(response.status === 200){
              let tweets = this.props.tweets.slice()
              const orgLikingUsers = this.props.tweets[index].likingUserIds.slice()
              const newLikingUsers = orgLikingUsers.filter(item =&gt; item !== this.props.user.id)
              tweets[index].likingUserIds = newLikingUsers
              this.action.getTweets(tweets)
            } else {
              alert(&quot;処理に失敗しました&quot;)
            }
          })
          .catch(error =&gt; console.error(error))
        } else {
          fetch(&quot;http://localhost:8080/twitter/like&quot;, {
            method: &quot;POST&quot;,
            body: JSON.stringify(data)
          })
          .then((response) =&gt; {
            if(response.status === 200){
              let tweets = this.props.tweets.slice()
              let likingUsers = this.props.tweets[index].likingUserIds.slice()
              likingUsers.push(this.props.user.id)
              tweets[index].likingUserIds = likingUsers
              this.action.getTweets(tweets)
            } else {
              alert(&quot;処理に失敗しました&quot;)
            }
          })
          .catch(error =&gt; console.error(error))
        }
      }
  
    render(){
      return(
        &lt;&gt;
        &lt;span&gt;{this.props.likingUserIds.length}  &lt;/span&gt;
        {this.props.tweets.length &gt; 0 &amp;&amp; this.props.likingUserIds.includes(this.props.user.id) ?
          &lt;Button variant=&quot;outline-danger&quot;&gt;
            &lt;FontAwesomeIcon icon={faHeart} onClick={() =&gt; this.likeButtonClicked(&quot;unlike&quot;, this.props.index)}/&gt;
          &lt;/Button&gt; :
          &lt;Button variant=&quot;outline-secondary&quot;&gt;
            &lt;FontAwesomeIcon icon={faHeart} onClick={() =&gt; this.likeButtonClicked(&quot;like&quot;, this.props.index)}/&gt;
          &lt;/Button&gt;
        }
        &lt;/&gt;
      )
    }
  }
  
  LikeButton_Comp.propTypes = {
    dispatch: PropTypes.func,
    user: PropTypes.object,
    tweets: PropTypes.array,
    likingUserIds: PropTypes.array,
    index: PropTypes.number,
    id: PropTypes.number
  }
  
  function mapStateToProps(state){
    return state
  }
  
  export default withRouter(connect(mapStateToProps)(LikeButton_Comp))
  </code></pre>