title: React-Redux. Redux state changes but data not being refreshed on page
body: <p>I am new at Redux and quite incompetent with React in general. Sorry if this is a stupid question.</p>
  
  <p>I have a simple table with data. I clicked on header and data at state sorted but this changes dont displayed on page. Data displayed only one time and not re-renders.</p>
  
  <p><strong>body</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let OurBody = ({ filteredArr }) =&gt; {
  
    return (
      &lt;tbody&gt;
        {filteredArr.map(element =&gt;
          &lt;tr key={element._id}&gt;
            &lt;td&gt;{element.company}&lt;/td&gt;
            &lt;td&gt;{element.balance}&lt;/td&gt;
            &lt;td&gt;{element.registered}&lt;/td&gt;
            &lt;td&gt;{element.address.country}&lt;/td&gt;
            &lt;td&gt;{element.employers.length}&lt;/td&gt;
            &lt;td&gt;--&lt;/td&gt;
          &lt;/tr&gt;
        )}
      &lt;/tbody&gt;
    )
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      filteredArr: getSortedCompanies(state.json, state.sortCompany)
    };
  }
  
  export default connect(mapStateToProps)(OurBody);</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>header</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let Headersort = ({ dispatch }) =&gt; (
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;td onClick={() =&gt; {dispatch(sortCompany());}}&gt;Company&lt;/td&gt;
     &lt;td&gt;Balance&lt;/td&gt;
     &lt;td&gt;Registered&lt;/td&gt;
     &lt;td&gt;Country&lt;/td&gt;
     &lt;td&gt;Number of employers&lt;/td&gt;
     &lt;td&gt;Show employers&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  );
  
  const mapStateToProps = (state) =&gt; ({
   Arr: state.json,
    })
  
  export default connect(mapStateToProps)(Headersort);  </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>App component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  
    componentDidMount() {
      this.props.dispatch(fetchPosts());
    }
  
    render() {
      const { loading, error } = this.props;
  
      if (error) {
        return &lt;div&gt;Error! {error.message}&lt;/div&gt;;
      }
    
      if (loading) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      }
  
      return (
      &lt;div&gt;
        &lt;table&gt;
          &lt;Headersort /&gt;
          &lt;OurBody /&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      )
    }
  }
    
  const mapStateToProps = state =&gt; ({
    loading: state.loading,
    error: state.error
  })
  
  App = connect(mapStateToProps)(App)
    
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Reducer works correctly. Every time I clicked data at store changes.
  No errors displayed.</p>
  
  <p>Code at github <a href="https://github.com/DrGreenNow/React-Redux-Table" rel="nofollow noreferrer">https://github.com/DrGreenNow/React-Redux-Table</a></p>