Question

我有一个博客应用程序，希望按投票或标题对帖子进行排序，因此我有以下用于排序的按钮：

<Button size='mini' onClick={() => {this.props.sortByVotes()}}>
    Votes
</Button>
<Button size='mini' onClick={() => {this.props.sortByTitle()}}>
    Title
</Button>

动作如下：

export const sortByVotes = posts => ({ type: SORT_BY_VOTES })

export const sortByTitle = posts => ({ type: SORT_BY_TITLE })

reducer如下：

case SORT_BY_VOTES:
    return {
        ...state,
        posts: state.posts.sort((a, b) => b.voteScore - a.voteScore)
    }
case SORT_BY_TITLE:
    return {
        ...state,
        posts: state.posts.sort((a, b) => {
            if (a.title > b.title) return 1
            if (a.title < b.title)return -1
            return 0
        })
    }

最后，在Main.js视图中，我在componentDidMount中获得帖子，并显示如下：

<Item.Group divided>
    {this.props.posts.map((p, idx) =>
        <PostSmall key={idx}
            id={p.id}
            title={p.title}
            body={p.body}
            category={p.category}
            voteScore={p.voteScore}
        />
    )}
</Item.Group>

仍然在Main.js中，我这样映射来自州的帖子：

function mapStateToProps(state) {
    return {
        posts: state.posts.posts,
        categories: state.categories.categories
    }
}

如您所见，这里没什么特别的。

问题是：状态已按预期更新，但视图未更新。

现在我还没有弄清楚如何解决它，以及为什么会这样。

任何帮助将不胜感激。

Answer 1

对象发布没有改变，因此React无法渲染组件。

我已经添加了一个解决方法。

reducers / posts.js

case SORT_BY_VOTES:
			const posts = Object.assign({},{posts:state.posts.sort((a, b) => b.voteScore - a.voteScore
			)})
			return Object.assign ({}, state, posts);

在Main.js中

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Container, Divider, Grid, Item } from 'semantic-ui-react'
import Categories from '../components/Categories'
import PostSmall from '../components/PostSmall'
import PostsSorter from '../components/PostsSorter'

import { fetchPosts } from '../actions/posts'
import { fetchCategories } from '../actions/categories'

class Main extends React.Component {

	render() {
		const posts = this.props.posts ? this.props.posts.posts || [] : [];
		console.log('render')
		return (
			<Container>
				<Grid columns='equal'>
					<Grid.Column>
						<PostsSorter/>
						<Divider/>
						<Categories categories={this.props.categories}/>
					</Grid.Column>
					<Grid.Column width={10}>
						<Item.Group divided>
							{posts.map((p, idx) =>
								<PostSmall key={idx} post={p}/>
							)}
						</Item.Group>
					</Grid.Column>
				</Grid>
			</Container>
		);
	}



	componentDidMount() {
		this.props.getPosts()
		this.props.getCategories()
	}
}



Main.propTypes = {
	posts: PropTypes.array,
	categories: PropTypes.array
}

Main.defaultProps = {
	posts: [],
	categories: []
}



function mapStateToProps(state) {
	console.log(state);
	return {
		posts: state.posts,
		categories: state.categories.categories
	}
}

function mapDispatchToProps(dispatch) {
	return {
		getPosts: () => dispatch(fetchPosts()),
		getCategories: () => dispatch(fetchCategories())
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Main)

但是您必须重构代码以使组件纯净，并仅将redux状态连接到视图。

Answer 2

您的操作未发送有效载荷。您是否正在启动要调用的API调用以发送到reducer？在减速器中，您需要从操作中捕获有效负载，然后更新状态。

操作：actions.tsx 减速器：reducers.tsx

因此，常见的工作流程是在操作中具有一个参数，然后在化简器中修改默认状态。请参阅上面的示例以供参考。

希望这会有所帮助。

React使用Redux更新状态而不是组件

2 个答案: