состояние редукса изменилось, но подключенный компонент не обновился, не может понять мутацию - PullRequest
Новая
       7

состояние редукса изменилось, но подключенный компонент не обновился, не может понять мутацию

0 голосов
/ 07 декабря 2018

Я знаю, что проблема в том, что есть мутация.Потому что по большей части из-за этого не происходит повторной визуализации.Но я не могу понять, что не так в том, как я это делаю.

Для данных, которые я получаю из бэкэнда, все в порядке, но если я пытаюсь изменить состояние из 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;
}

И, наконец, мой дочерний компонент , который должен перерисовываться. 

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)

Просьба не обращать внимания на государственные и частные состояния в коде

1 Ответ

0 голосов
/ 07 декабря 2018

Вы изменяете свое состояние в редукторе.Вам необходимо вернуть новый объект состояния и обновить его с учетом полезной нагрузки. 

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

Должно быть что-то в этом роде.

...