React обновляет состояние, но не компонент с Redux

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 })

И редуктор выглядит следующим образом:

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

Объект post не изменяется, поэтому React не рендерит компонент.

Я добавил способ исправления.

redurs / 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)

Но вы должны реорганизовать код, чтобы сделать компонент чистым и подключить состояние избыточности только для просмотра.

Answer 2

Ваше действие не отправляет полезную нагрузку.Вы инициируете вызов API в действиях для отправки в редуктор?В вашем редукторе вам нужно захватить полезную нагрузку из действий и затем обновить состояние.

Действия: actions.tsx Редукторы: redurs.tsx

Таким образом, общий рабочий процесс состоит в том, чтобы иметь параметр в действиях, а затем изменитьсостояние по умолчанию в редукторе.См. Пример выше для справки.

Надеюсь, это поможет.