javascript - 在 react 子组件中操作 Prop 的 redux-react 方法是什么

Question

我是 Redux 和 React 的新手。我正在尝试为 react 组件实现排序，但据我所知，您不允许在 Redux 中操作 props 。在 redux-react 中正确的做法是什么

这是我的组件

import React, { Component, PropTypes } from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as ArticlesActions from '../../actions/ArticlesActions';
import { ArticleList } from '../../components';

class ArticleListApp extends Component {

  static propTypes = {
    articles: PropTypes.array.isRequired,
    next: PropTypes.string.isRequired,
    actions: PropTypes.object.isRequired
  };

  componentWillMount() {
    this.props.actions.fetchArticles('57bde6d6e4b0dc55a4f018e0');
  }

  renderLoadMoreButton() {
    if (!_.isEmpty(this.props.next)) {
      return (
        <button type="button" className="btn btn-link center-block" onClick={this.props.actions.fetchMoreArticles.bind(this, this.props.next)}>Load More</button>
      );
    }

    return '';
  }

  render () {
    return (
      <div>
        <ArticleList articles={this.props.articles}/>
        <div className="row">
          <div className="col-md-12 center-block">
            {this.renderLoadMoreButton()}
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    articles: state.articleList.articleList,
    next: state.articleList.next
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(ArticlesActions, dispatch)
  };
}

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

一旦我得到 articles，我将它传递给 ArticleList 组件，我认为它是 redux-react 中的一个 dump 组件

import React, { Component, PropTypes } from 'react';

export default class ArticleList extends Component {
  static propTypes = {
    articles: PropTypes.array.isRequired
  }
  constructor(props, context) {
    super(props, context);
  }

  renderList() {
    return this.props.articles.map((article) =>
       <tr>
        <td>{article.title}</td>
        <td>Author</td>
        <td>{article.words}</td>
        <td>ago</td>
       </tr>
    );
  }

  sortArticles() {
    this.props.articles = this.props.articles.sort(); // I'm not allowed to do this. 
  }

  render() {
    return (
        <table className="table table-hover">
          <thead>
            <tr>
              <th>UNPUBLISHED ARTICLES ({this.props.articles.length})</th>
              <th>AUTHOR</th>
              <th>WORDS</th>
              <th onClick={this.sortArticles.bind(this)}>SUBMITTED</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
    );
  }
}

在这个组件中，我希望有一个排序功能，用户可以单击该列并按该列对整个表格进行排序。

articles 对象的例子是

[{title: 'title', word: 10}, {title: 'title', word: 5}]

Answer 1

如果我没理解错，那么有两种方法可以解决这个问题:

1. 文章应保存在 reducer 中，排序或不排序，具体取决于用户交互。从技术上讲，这是通过(由容器)触发“排序”操作，然后通过更改其状态(返回一个新状态，即先前的数组但已排序)来处理该事件的化简器来完成的。不管这是如何完成的，这都会引入一个问题:任何订阅 articles reducer 的组件都将始终获得一个排序列表。这是你想要的吗？也许“排序”显示是 ui 组件状态的一部分，并且特定于该组件，所以....

2. 让 reducer 保留未排序的数组并有两个不同的组件(或一个组件带有附加属性说明其是否“已排序”)，并在该组件的渲染函数期间，排序或不排序排序，根据组件容器给出的 prop。从技术上讲，这是通过让容器组件具有一个状态(已排序或未排序)作为 prop 传递给 View 组件来完成的。

如果你是 react/redux 的新手并且我所说的对你来说意义不大，我不介意添加代码 - 但我认为你的问题是关于原理而不是关于实际代码。