title: Redux response not caught by corresponding component which called the redux actions
body: <p>I have 4 nested components where one of them call a redux function from the 3rd layer. The received response isn't the one called for.<br/>To better understand the problem, the hierarchy goes like this. <br/>A page has a certain amount of folders. The following code has the list of folders as 'folderList'.</p>
  <pre><code>listView() {
      // console.log(this.props.folders);
      return (
        &lt;div className='container-fluid'&gt;
          &lt;div className='row flex-center'&gt;
            &lt;div className='col-md-8'&gt;
              &lt;ListSetView
                folderList={this.props.folders}
                rootFolder={this.state.rootFolder}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>Then ListSetView loops through the list,</p>
  <pre><code>listView() {
      if (this.state.folderList.length === 0) {
        return (
          &lt;div className='mt-4 ml-3'&gt;
            &lt;b&gt;No Chapter Avaiable&lt;/b&gt;
          &lt;/div&gt;
        );
      }
      // console.log(this.state.folderList);
      return (
        &lt;div className='container-fluid list'&gt;
          &lt;div className=''&gt;
            {this.state.folderList.map((item, index) =&gt; (
              &lt;div className='col-auto' key={index} id={item.node.selfLoc.uid}&gt;
                &lt;figure className={style.folderCard}&gt;
                  &lt;span&gt;{`${item.node.name}`}&lt;/span&gt;
                  &lt;span&gt; &lt;/span&gt;
                &lt;/figure&gt;
                &lt;div className='container-fluid'&gt;
                  &lt;div className='row flex-center'&gt;
                    &lt;tr className='col-auto'&gt;
                      &lt;ChapterView chapter={item} /&gt;
                    &lt;/tr&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>Then ChapterView calls for an action in componentDidMount</p>
  <pre><code>componentDidMount() {
      console.log(&quot;Mount &quot;, this.props.chapter.node.name);
      this.props.exploreFolder(this.props.chapter.node.selfLoc.id);
    }
  
  view() {
      console.log(&quot;View &quot;, this.props.rootChapter.saqSet);
      return (
        &lt;div&gt;
          &lt;PostSetView
            postList={this.props.rootChapter.postSet}
            rootFolder={this.props.rootChapter}
          /&gt;
        &lt;/div&gt;
      );
    }
  
  const mapToStateFolder = (state) =&gt; ({
    isAuthenticated: state.auth.isAuthenticated,
    user: state.auth.user,
  
    isLoading: state.folder.isLoading,
    isLoaded: state.folder.isLoaded,
  
    rootChapter: state.folder.rootFolder,
    data: state.folder.postSet,
  });
  
  export default connect(mapToStateFolder, { exploreFolder })(ChapterView);
  
  </code></pre>
  <p>Then the PostSetView component shows the list of posts as follows,</p>
  <pre><code>const PostItem = (props) =&gt; {
    return (
      &lt;tr className={style.contentItem}&gt;
        &lt;td className={style.title}&gt;
          &lt;MDBIcon icon={sticky-note} /&gt;
          &lt;a href={`/edu/notes/content/?uid=${props.data.uid}`}&gt;
            {props.data.title}
          &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;{new Date(props.data.dateTime).toLocaleString()}&lt;/td&gt;
        &lt;td&gt;
          &lt;button&gt;Edit&lt;/button&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button&gt;Request Deletion&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    );
  };
  tableView() {
      if (this.state.postList.length === 0) {
        return (
          &lt;div className='ml-4 mt-4'&gt;
            &lt;tr&gt;No item available&lt;/tr&gt;
            {this.newContent()}
          &lt;/div&gt;
        );
      }
      return (
        &lt;table className='table mt-3'&gt;
          &lt;tbody&gt;
            {this.state.postList.map((item, index) =&gt; (
              &lt;PostItem
                key={index}
                data={item}
                chapter={this.props.rootFolder.name}
              /&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  </code></pre>
  <p>Now the output should be like this <br/>
  Folder 1<br/>-&gt; Content 1a<br/>-&gt; Content 1b<br/>-&gt; Content 1c<br/>
  Folder 2<br/>-&gt; Content 2a<br/>-&gt; Content 2b</p>
  <p>But the output goes like this,<br/>
  Folder 1<br/>-&gt; Content 2a<br/>-&gt; Content 2b<br/>
  Folder 2<br/>-&gt; Content 2a<br/>-&gt; Content 2b</p>
  <p>The output is not necessarily of the 2nd folder. It shows which ever response of ChapterView is fetched first. So, each time the page is reloaded, the contents of all the folders change.</p>
  <p>This maybe a bit too complicated scenario, so feel free to ask questions for better understanding.</p>