在redux中对redux中的数据进行排序

Posted 2021-05-05

背景

我正在使用Redux开展我的第一个项目。我试图在reducer排序数据。 reducer有两种排序方法。一个用于基于timeStamp排序数据，一个用VoteScore排序。

问题

reducer发射，我可以console.log()数据，并看到它被传递到正确的情况下排序，但数据不会在屏幕上排序。

**

我可以在console.log中看到数据正在排序的数据。所以这不是重新渲染。

**

数据示例

(2) [{…}, {…}]
{timestamp: 1468479767190, voteScore: -5, …}

{timestamp: 1467166872634, voteScore: 6, …}

示例减速器

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;
    }
}

示例调度和onClick方法

<button onClick={() => this.props.boundSortPosts(this.state.timeStamp)}>Click MeK</button>

const mapDispatchToProps = (dispatch) => ({
  boundSortPosts: (attribute) => dispatch(sortPosts(attribute))
});

示例动作

export function setPosts(posts) {
    return {
        type: SET_POSTS,
        posts,
    }
}

export function sortPosts(attribute) {
    return {
        type: SORT_POSTS,
        attribute,
    }
}

最初像这样渲染数据

render() {
        return (
            <div>
                <Posts />
                <div><button onClick={() => this.props.boundSortPosts(this.state.timeStamp)}>Sort by Time Stamp</button></div>
                <div><button onClick={() => this.props.boundSortPosts(this.state.voteScore)}>Sort by Vote Score</button></div>
                {
                    this.props.posts.map((post, index) => {
                        return (
                            <div key={index}>
                                <h4>{post.timestamp}</h4>
                                <h4>{post.voteScore}</h4>
                            </div>
                        )
                    })
                }
            </div>
        )
    }

题

我该怎样做才能在这一点上做出让步？

答案

首先也是非常重要的是你不应该改变你的状态。 sort（）方法对数组中的元素进行排序并返回数组。您可以通过在reducer中排序之前调用state.slice（）来创建状态数组的副本，如下所示：

return state.slice().sort(function(a, b) {
   return a.timestamp - b.timestamp;
});

关于未重新渲染的组件，请检查mapStateToProps。它应该是这样的：

function mapStateToProps(state} {
    return {
        posts: state.posts // posts is reducer which is passed to your store.
    }
}