Question

背景

我正在使用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;
    }
}

示例调度＆amp; 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>
        )
    }

问题

此时我必须做些什么来重新投降？

Answer 1

首先，非常重要的是你应该不要改变你的状态。 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.
    }
}

使用redux

1 个答案: