title: How can manipulate redux data after dispatch it?
body: <p>I have a search screen, contain Input And TopTabs "Songs, Artists",</p>
  
  <p>When I get data from API after a search I make two things</p>
  
  <p>1- I setState to appear the TopTab Component "true/false"
  2- dispatch an action to save Songs &amp; Artists Data in redux store.</p>
  
  <p>that works fine.</p>
  
  <p>But in topTab component, as I say before I have tow tabs "songs, artists"</p>
  
  <p>For example, In the Songs component, I want to manipulate the data to achieve my case so in <code>componentDidMount</code> I Map the songs array from redux and push the new data into the component state.</p>
  
  <p>But it's not working fine! </p>
  
  <p>At the first time, I got songs from redux as empty [] although it's saved successfully in redux store when I get data from API</p>
  
  <p>So how can I handle this case to not mutate the data? </p>
  
  <p>Search.js "Main screen"</p>
  
  <pre><code>onSearch = async () =&gt; {
      const {searchText} = this.state;
      if (searchText.length &gt; 0) {
        this.setState({onBoarding: false}); // to appear the TopTab Component
        try {
          let response = await API.post('/search', {
            name: searchText,
          });
          let {
            data: {data},
          } = response;
          let artists = data.artists.data;
          let songs = data.traks.data;
          this.props.getResult(songs, artists);
        }
        catch (err) {
          console.log(err);
        }
  }
  
  render(){
  
  &lt;View style={styles.searchHeader}&gt;
            &lt;Input
              onChangeText={text =&gt; this.search(text)}
              value={this.state.searchText}
              onSubmitEditing={this.onSearch}
              returnKeyType="search"
            /&gt;
          &lt;/View&gt;
  
          {this.state.onBoarding ? (
              &lt;SearchBoard /&gt;
          ) : (
            &lt;SearchTabNavigator /&gt; // TopTabs component
          )}
  }
  </code></pre>
  
  <p>SongsTab</p>
  
  <pre><code>...
      componentDidMount() {
          console.log('props.songs', this.props.songs); // Empty [] 
          let All_tunes = [];
          if (this.props.songs?.length &gt; 0) {
            console.log('mapping...');
            this.props.songs.map(track =&gt;
              All_tunes.push({
                id: track.id,
                name: track.name,
                url: URL + track.sounds,
                img: URL + track.avatar,
              }),
            );
            this.setState({All_tunes});
          }
        }
  ...
      const mapStateToProps = state =&gt; {
        return {
          songs: state.searchResult.songs,
        };
      };
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>I fix the issue by using <code>componentDidUpdate()</code> life cycle</p>
  
  <blockquote>
    <p>If you have any other ways tell me, please!</p>
  </blockquote>
  
  <p>SongsTab</p>
  
  <pre><code> manipulateSongs = arr =&gt; {
      let All_tunes = [];
      arr.map(track =&gt;
        All_tunes.push({
          id: track.id,
          name: track.name,
          url: URL + track.sounds,
          img: URL + track.avatar,
        }),
      );
      this.setState({All_tunes});
    };
  
    componentDidMount() {
      if (this.props.songs?.length &gt; 0) {
        this.manipulateSongs(this.props.songs);
        console.log('mapping...');
      }
    }
  
    componentDidUpdate(prevProps) {
      if (prevProps.songs !== this.props.songs) {
        this.manipulateSongs(this.props.songs);
      }
    }
  </code></pre>