redux状态已更改但连接组件未更新，无法理解突变

Question

我知道问题是有变异。因为大多数情况下不会因为它而重拍。但是，我不明白我这样做有什么不对。

对于我从后端获得的数据来说，一切都很好，但是如果我试图从FE中改变状态，它就不能工作了。问题在于groupDevicesBySelectedFilter(devicesGroups).操作完成后，我得到响应，即状态在控制台中被更改，但在标题中，FE上没有更改。

Filter.tsx

    import * as React from 'react'
import {IAppState} from '../../reducers'
import {connect} from 'react-redux'
import { Dropdown, Header, Icon } from 'semantic-ui-react'
import { INodeTreeFilters, INodeTreeDevicesInfo } from './type-definition';
import * as nodeTreeActions from '../../actions/node-tree';
import * as _ from 'lodash';

interface INodeTreeFilterProps{
    filters: INodeTreeFilters;
    selectGroupsFilter: any;
    groupDevicesBySelectedFilter: typeof nodeTreeActions.groupDevicesBySelectedFilter;
    devices: INodeTreeDevicesInfo
}

class NodeTreeFilter extends React.Component<INodeTreeFilterProps>{

    public render() {
        const {filters, selectGroupsFilter, groupDevicesBySelectedFilter, devices} = this.props;
        const groupsFilterSelected = (event: React.SyntheticEvent<HTMLDivElement>, data: any) => {
            selectGroupsFilter({id:data.value});
            const devicesGroups=_.chain(devices).groupBy(data.value).map((v, i) => {
                return {
                  id: i,
                  name: i,
                  devices: v
                }
              }).value();
            groupDevicesBySelectedFilter(devicesGroups);
        }
        return (
            <Header as='h4'>
            <Icon name='filter' />
            <Header.Content>
              Group nodes by {' '}
              <Dropdown
                inline = {true}
                options={filters}
                onChange={groupsFilterSelected}
              />
            </Header.Content>
          </Header>
        )
    }
}

    const mapStateToProps = (state: IAppState) => (
    {
        filters: state.sidebar.filters,
        devices: state.sidebar.devices,
    });

    const mapDispatchToProps = {
        selectGroupsFilter: nodeTreeActions.selectNodeTreeGroupFilter,
        groupDevicesBySelectedFilter: nodeTreeActions.groupDevicesBySelectedFilter
    };

    export default connect(mapStateToProps, mapDispatchToProps)(NodeTreeFilter)

我的减速器

export const devicesGroupsReducer = (state: IDevicesGroups = [], action: IActionWithPayload) => {
    switch (action.type) {
      case nodeTreeActions.GROUP_DEVICES_BY_SELECTED_FILTER:
        return  action.payload 
      default:
        return state;
    }   };

export interface IActionWithPayload extends Action {
  payload: any;
}

，最后是 my子组件，它应该重命名。

import * as React from 'react'
import {List} from 'semantic-ui-react'
import {IAppState,} from '../../reducers'
import {connect} from 'react-redux'
import {INodeTreeDevicesInfo, INodeTreeDeviceInterfaces, IDevicesGroups} from './type-definition'
import * as nodeTreeActions from '../../actions/node-tree'
// import * as nodeTreeService from '../../services/node-tree'
import {requestError} from "../../actions/error";

interface INodeTreeProps{
  devices: INodeTreeDevicesInfo ;
  interfaces: INodeTreeDeviceInterfaces;
  getDeviceInterfaces: typeof nodeTreeActions.getNodeTreeDeviceInterfaces;
  requestError: typeof requestError;
  deviceGroups: IDevicesGroups;
}

class NodeTree extends React.Component<INodeTreeProps> {


 public generateParentTree = (array: any) => {
    const tree = array.map((item:any) => (   
          <List.Item key={item.id}>
            <List.Icon name={ "caret right"} />
            <List.Content onClick={this.generateChildren} verticalAlign='middle'>
                <List.Description>{item.name}</List.Description>
            </List.Content> 
          </List.Item> 
      ))
      return tree
}


  public generateChildren = () => {
    console.log('I will generate children')
 }


  public render() {
   const {devices, deviceGroups} = this.props;  
   const parentArray = deviceGroups !== undefined && deviceGroups.length !== 0  ? deviceGroups : devices;
   const Tree = this.generateParentTree(parentArray)
     console.log('')
    return (
      <div>
          <List>
            {Tree}
          </List>
      </div>
    );
  } 
}

  const mapStateToProps = (state: IAppState) => (
  {
    devices: state.sidebar.devices,
    interfaces: state.sidebar.interfaces,
    deviceGroups: state.sidebar.deviceGroups
  });

  const mapDispatchToProps = {
    requestError,
    getDeviceInterfaces: nodeTreeActions.getNodeTreeDeviceInterfaces

  };

  export default connect(mapStateToProps, mapDispatchToProps)(NodeTree)

请不要介意公共和私人州的代码。

Answer 1

在减速机里你的状态发生了变异。您需要返回一个新的状态对象并使用有效负载更新它。

return {
  ...state,
  IDevicesGroups: [...state.IDevicesGroups, action.payload]
}

应该是这样的。