title: Sorting data in a reducer in redux
body: <p><strong>Background</strong></p>
  
  <p>I am working on my first project using <code>Redux</code>. I am trying to sort data in a <code>reducer</code>. The <code>reducer</code> has 2 sort methods. One for sorting data based on the <code>timeStamp</code> and one by the <code>VoteScore</code>. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>The <code>reducer</code> fires off, I can <code>console.log()</code> the data and see it is being passed to the correct case when sort is fired off, but the data does not sort on the screen. </p>
  
  <p>**</p>
  
  <blockquote>
    <p>I can see when I console.log the data that the data is sorting. So it
    is just not rerendering.</p>
  </blockquote>
  
  <p>** </p>
  
  <p><strong>Example of Data</strong></p>
  
  <pre><code>(2) [{…}, {…}]
  {timestamp: 1468479767190, voteScore: -5, …}
  
  {timestamp: 1467166872634, voteScore: 6, …}
  </code></pre>
  
  <p><strong>Example Reducer</strong></p>
  
  <pre><code>function posts(state = [], action) {
      switch(action.type) {
          case 'SORT_POSTS': {
            switch (action.attribute) {
              case 'BY_TIMESTAMP':
                return state.sort(function(a, b) {
                    return a.timestamp - b.timestamp;
                });
              case 'BY_VOTESCORE':
                return state.sort(function(a, b) {
                  return a.voteScore - b.voteScore;
                });
              default:
                return state;
            }
          }
          case SET_POSTS:
              return action.posts;
          default:
              return state;
      }
  }
  </code></pre>
  
  <p><strong>Example Dispatch &amp; onClick Method</strong></p>
  
  <pre><code>&lt;button onClick={() =&gt; this.props.boundSortPosts(this.state.timeStamp)}&gt;Click MeK&lt;/button&gt;
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    boundSortPosts: (attribute) =&gt; dispatch(sortPosts(attribute))
  });
  </code></pre>
  
  <p><strong>Example Action</strong></p>
  
  <pre><code>export function setPosts(posts) {
      return {
          type: SET_POSTS,
          posts,
      }
  }
  
  export function sortPosts(attribute) {
      return {
          type: SORT_POSTS,
          attribute,
      }
  }
  </code></pre>
  
  <p><strong>Initially Rendering Data Like This</strong></p>
  
  <pre><code>render() {
          return (
              &lt;div&gt;
                  &lt;Posts /&gt;
                  &lt;div&gt;&lt;button onClick={() =&gt; this.props.boundSortPosts(this.state.timeStamp)}&gt;Sort by Time Stamp&lt;/button&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;button onClick={() =&gt; this.props.boundSortPosts(this.state.voteScore)}&gt;Sort by Vote Score&lt;/button&gt;&lt;/div&gt;
                  {
                      this.props.posts.map((post, index) =&gt; {
                          return (
                              &lt;div key={index}&gt;
                                  &lt;h4&gt;{post.timestamp}&lt;/h4&gt;
                                  &lt;h4&gt;{post.voteScore}&lt;/h4&gt;
                              &lt;/div&gt;
                          )
                      })
                  }
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>What must I do to cause a rerender at this point? </p>