Question

这是智能组件：

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

和行动：

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

和2个减速器：

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

动作reverseItems反转数组，但问题是它没有重写状态，因为它是由另一个动作形成的。

我意识到这是一个基本问题，但我无法做到这一点。

Answer 1

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

Answer 2

替换您的 items.sort()和[...items].sort()的语句创建对数组的新引用，并允许重新呈现组件。 sort函数使用相同的引用对数组进行排序，并且不会导致重新渲染。

在React Redux

2 个答案: