React не может получить состояние от избыточного в дочернем компоненте - PullRequest
0 голосов
/ 22 марта 2019

У меня есть компонент, который включает другой дочерний компонент.Оба пытаются получить одно и то же состояние от редукса.Но родительский компонент делает это успешно, потому что child - ноль.Код такой же.Что я делаю не так?

Компонент Parant

import './home.css';

import React from 'react';
import { connect } from 'react-redux';
import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';

import { getSession } from 'app/shared/reducers/authentication';
import { createNewTab } from 'app/modules/home/code_tab.reducer';
import { Editor } from 'app/modules/home/editor';

export interface IHomeProp extends StateProps, DispatchProps {}

export class Home extends React.Component<IHomeProp> {
  componentDidMount() {
    this.props.getSession();
  }  

  render() {  

    return (
      <Editor />
    );
  }
}

const mapStateToProps = storeState => ({
  codeTabs: storeState.codeTab.code_tabs
});

const mapDispatchToProps = { createNewTab };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Дочерний компонент:

import React from 'react';
import { connect } from 'react-redux';
import { Controlled as CodeMirror } from 'react-codemirror2';
import { createNewTab } from 'app/modules/home/code_tab.reducer';
import 'react-tabs/style/react-tabs.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
require('codemirror/mode/xml/xml');

export interface IEditorProp extends StateProps, DispatchProps {}

export class Editor extends React.Component<IEditorProp> {
  render() {
    console.log(this);
    return <div>lala</div>;
  }
}

const mapStateToProps = storeState => ({
  codeTabs: storeState.codeTab.code_tabs
});

const mapDispatchToProps = {};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Editor);

Так что в первом случае codeTabs в props не является нулевым, а вво-вторых, это так.Также я заметил, что инициализация codeTabs в редакторе произошла до Home.

Редуктор:

import axios from 'axios';

import { REQUEST, SUCCESS, FAILURE } from 'app/shared/reducers/action-type.util';
import { ICodeTab } from '../../shared/model/code_tab.model';

export const ACTION_TYPES = {
  ADD_NEW_TAB: 'code_tab/ADD_NEW_TAB',
  GET_ALL: 'code_tab/GET_ALL'
};

const initialState = {
  code_tabs: [] as ICodeTab[]
};

export type CodeTabState = Readonly<typeof initialState>;

// Reducer
export default (state: CodeTabState = initialState, action): CodeTabState => {
  switch (action.type) {
    case ACTION_TYPES.ADD_NEW_TAB:
      const tab = new ICodeTab();
      return {
        ...state,
        code_tabs: [...state.code_tabs, tab]
      };
    case ACTION_TYPES.GET_ALL:
      return {
        ...state
      };
    default:
      return state;
  }
};

const apiUrl = 'api/account';

export const createNewTab = () => ({
  type: ACTION_TYPES.ADD_NEW_TAB
});

export const getAll = () => ({
  type: ACTION_TYPES.GET_ALL
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...