reactjs - redux 状态改变但连接的组件没有更新，无法理解突变

Question

我知道问题是存在突变。因为大多数情况下没有重新渲染。但是，无法理解我这样做的方式有什么问题。

对于我从后端获得的数据，一切都很好，但是如果我尝试从 FE 更改状态，它就不起作用。问题在于groupDevicesBySelectedFilter(devicesGroups)。操作完成后，我收到控制台中状态已更改的响应，但如标题所示 FE 没有更改。

过滤器.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;
}

最后是 我的子组件，它应该重新渲染。

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)

请不要介意代码中的公共和私人状态

标签： reactjsreact-reduxrenderingmutation

Answer 1

你在 reducer 中改变你的状态。您需要返回一个新的状态对象并使用您的有效负载对其进行更新。

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

应该是这样的。