Question

背景

我的React组件中有一些来自redux商店的数据。我希望这些数据在向用户显示时最初进行排序。我有一个排序缩减器并在componentDidMount中调用它。这不会对数据进行排序。我知道sort函数和reducer是正确的，因为我在button点击上调用reducer，它对数据进行排序。

示例代码

组件

class PostsContainer extends Component {
    constructor(props){
        super(props);
        this.state = {
            timeStamp: 'BY_TIMESTAMP',
            voteScore: 'BY_VOTESCORE',
            voteScoreHigh: 'BY_HIGH_VOTESCORE',
        }
    }

    componentDidMount() {
        this.props.boundSortPosts(this.state.voteScoreHigh);
    }

    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 className='cats' key={index}>
                                <h4>{post.timestamp}</h4>
                                <h4>{post.voteScore}</h4>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

function mapStateToProps(state) {
    return state;
}

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

export default connect(mapStateToProps, mapDispatchToProps)(PostsContainer);

动作

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

减速

function posts(state = [], action) {
    switch(action.type) {
        case 'SORT_POSTS': {
          switch (action.attribute) {
            case 'BY_HIGH_VOTESCORE':
                return state.slice().sort(function(a, b) {
                    return b.voteScore - a.voteScore;
              });
            default:
              return state;
          }
        }
        case SET_POSTS:
            return action.posts;
        default:


 return state;
}

}

问题

初始页面加载完成后，如何使用reducer对数据进行排序？

Answer 1

我会重新考虑你的应用程序的架构。状态是应用状态的标准化表示。它应包含标识您的应用应立即显示的内容的信息。

PostsContainer想要以特定方式显示您的帖子的事实是与该组件有关的细节。在这种情况下，我将构建一个选择器，从状态获取帖子，并在显示它们之前对它们进行排序。该选择器应该应用于mapStateToProps（组件现在应尽可能少关于状态，因此只应传递包含帖子的密钥。）

如果您担心性能（每次状态发生变化时使用列表）或方便（必须自己操纵状态或构建视图），您可以考虑使用reselect，这实际上涵盖了你的用例非常好。

在componentDidMount上对Redux提供的数据进行排序

1 个答案: