Question

我正在为某些组件使用基类。但是当使用redux时，我遇到了连接问题。只有在尝试使用基类'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

对于＆＃39;基类＆＃39; 仅添加contextTypes

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

并且让孩子继续使用连接

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

React es6扩展了class，react-redux问题

1 个答案: