2016-05-18 3 views
0

Я использую базовый класс для некоторых компонентов. Однако при использовании redux я получаю проблему с подключением. Это происходит только при попытке использовать соединение с базовым классом 'DockerWindow'. Если я использую его только на ребенке «DockChat» он работает. Как я могу получить доступ к 'магазину' на 'DockerWindow' (базовый класс)?React es6 расширяет класс, проблема с реакцией-редукцией

DockerWindow 
-> DockChat 
-> DockOnline 

Ошибка:

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

Пакеты: Реагировать 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); 

ответ

0

Для 'базового класса' добавить только contextTypes

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

и для детей продолжать использовать подключение

DockOnline.contextTypes = { 
    store: PropTypes.object 
}; 
export default connect(mapStateToProps,mapDispatchToProps)(DockOnline); 
Смежные вопросы