Sorting 在React Redux中排序后重新呈现项目

这是智能组件：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Filter from '../Filter';
import Sort from '../Sort';

import { getItems, selectItem, reverseItems, findItems } from '../../actions/items';

import './app.css';

const App = ({filterList, sortList,  onGetItems, onFindItems, reverseItems, onSelectItem}) => {

onGetItems();

return (
    <div>
        <Filter items={filterList} findText={onFindItems} reverseItems={reverseItems} selectItem={onSelectItem} />
        <Sort items={sortList} selectItem={onSelectItem} />
    </div>
)}

function mapStateToProps(state) {
    return {
        filterList: state.items.filter(item => item.name.includes(state.filter.toLowerCase())),
        sortList: state.items,
    }
  }

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
    onGetItems: getItems,
    onSelectItem: selectItem,
    onFindItems: findItems,
    reverseItems: reverseItems
}, dispatch)}

export default connect(mapStateToProps, matchDispatchToProps)(App);

action reverseItems反转数组，但问题是它不会重写状态，因为它是由另一个操作形成的

我意识到这是一个基本问题，但我不知道如何做到这一点。

尝试使用异步调用。 您可以在http请求后发送操作，例如

接收的\u项。
替换您的
items.sort（）
语句和
[…items].sort（）
语句，该语句创建对数组的新引用，并允许重新呈现组件。sort函数使用相同的引用对数组进行排序，不会导致重新渲染。
您的代码存在很多问题，例如定义并立即调用了
onGetItems
，返回的
项未存储在redux状态，您正在操作中应用状态转换，等等。我建议你检查一下这个（）或任何其他可以通过谷歌找到的教程。
let items = [];

(function onGetItems() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', '/items.json', false);
    xhr.send();
    if (xhr.status !== 200) {
        console.log(xhr.status + ': ' + xhr.statusText);
    } else {
        items = JSON.parse(xhr.responseText.toLowerCase());

        items.sort(function(a, b) {
            if (a.name > b.name) return 1;
            if (a.name < b.name) return -1;
            return 0;
        });
    }
})();

export const getItems = () => dispatch => {
    dispatch({ type: 'ADD_ITEMS', payload: items });
}

export const selectItem = (item)  => {
    console.log(item);
    return {
        type: "ITEM_SELECTED",
        payload: item
    }
};

export const reverseItems = (items)  => {
    console.log(items)
    return {
        type: "REVERSE_ITEMS",
        payload: items.reverse()
    }
};

export const findItems = (items)  => {
    return {
        type: "FIND_ITEMS",
        payload: items
    }
};

const initialState = '';

export default function filter(state = initialState, action) {
    switch (action.type) {
        case 'FIND_ITEMS': return action.payload;
        default: return state
    }
}

const initialState = [];

export default function items(state = initialState, action) {
    switch (action.type) {
        case 'ADD_ITEMS': return action.payload;
        default: return state
    }
}