React es6扩展类，React redux问题

Question

我正在为一些组件使用基类。然而，当使用redux时，我会遇到连接问题。只有当尝试将connect与基类'DockerWindow'一起使用时，才会发生这种情况。如果我只在孩子身上使用'DockChat'，它会起作用。如何访问'DockerWindow'（基类）上的"存储"？

DockerWindow
-> DockChat
-> DockOnline

错误：

react-redux
connect.js?243b:129Uncaught TypeError: Cannot read property 'store' of undefined

包装：React 15.0.2、React Redux 4.4.5、Redux 3.5.2

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
import Docker from './containers/Docker.js'
import './styles/docker.scss';
var dockerElement = document.querySelector('Docker');
var sessionKey = dockerElement.dataset.sessionKey || '';
var version = dockerElement.dataset.version || '0.0.1';
const store = configureStore({},version);
render(
    <Provider store={store}>
        <Docker session={sessionKey} />
    </Provider>,
    dockerElement
);

// configureStore.js
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import * as storage from 'redux-storage'
import createEngine from 'redux-storage-engine-localstorage';
import rootReducer from '../reducers';
import {mapDispatchToProps} from '../actions';
export default function configureStore(initialState,version) {
    const reducer = storage.reducer(combineReducers(rootReducer));
    const engine = createEngine('mytest');
    const middleware = storage.createMiddleware(engine);
    let store = createStore(reducer,initialState, compose(applyMiddleware(middleware)));
    const load = storage.createLoader(engine);
    return store;
}

// actions
export const APP_UPDATE_VERSION = 'APP_UPDATE_VERSION';
export function appUpdateVersion(version) {
    return {
        type: APP_UPDATE_VERSION,
        version: version
    }
}
export function mapDispatchToProps(dispatch) {
    return {
        appUpdateVersion: (version) => { dispatch(appUpdateVersion(version)); }
    };
}

// reducers.
import {
    APP_UPDATE_VERSION    } from '../actions'
const initialStateApp = {
    version:"0.0.1"
};
export function app(state = initialStateApp, action) {
    switch (action.type) {
        case APP_UPDATE_VERSION:
            // Somehow clear engine/all states
            return state;        
        default:
            return state;
    }
}
const rootReducer = {
    app
};
export default rootReducer;
export function mapStateToProps(state) {
    return {
        app: state.app
    }
}

// DockerWindow.js
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { mapDispatchToProps } from '../actions'
import { mapStateToProps } from '../reducers'
class DockerWindow extends React.Component {
    constructor(props) {
        super(props);
    }
    render(body) {
        return <div>{body}</div>
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(DockerWindow);

// DockOnline.js
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { mapDispatchToProps } from '../actions'
import { mapStateToProps } from '../reducers'
import DockerWindow from './DockerWindow';
class DockOnline extends DockerWindow {
    constructor(props) {
        super(props);
    }
    render(){
        return super.render(<div>child</div>)
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(DockOnline);

Answer 1

对于"基类"仅添加contextTypes

DockerWindow.contextTypes = {
    store: PropTypes.object
};
export default (DockerWindow);

并为孩子们继续使用连接

DockOnline.contextTypes = {
    store: PropTypes.object
};
export default connect(mapStateToProps,mapDispatchToProps)(DockOnline);