1
私はReduxとReactを初めて使用しています。私は反応コンポーネントのソートを実装しようとしていますが、私が知っている限り、Reduxのpropsを操作することはできません。私はそれがでdumpコンポーネントだと思うArticleListコンポーネントにReduxの-反応することを渡すarticles私が手にしたらここに私のコンポーネント子どもの反応の中で小道具を操作するための冗長反応の方法は何ですか？
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);
年代に
をReduxの反応することを行うための正しい方法は何ですか
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オブジェクトの例は、これReduxのフローは、コンポーネントが減速状態を更新する、それによってリッスンするアクションを呼び出すある
[{title: 'title', word: 10}, {title: 'title', word: 5}]
どの属性に基づいてソートしますか？アーティクルがオブジェクトであるため、 'this.props.articles.sort（）'は機能しません。 –
申し訳ありません。例として、1つの属性でソートしたいと思います。質問を更新します。 – toy