У меня есть компонент, который включает другой дочерний компонент.Оба пытаются получить одно и то же состояние от редукса.Но родительский компонент делает это успешно, потому что 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
});