首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >redux es6扩展类,redux redux问题

redux es6扩展类,redux redux问题
EN

Stack Overflow用户
提问于 2016-05-18 09:25:22
回答 1查看 991关注 0票数 0

我对一些组件使用了一个基类。然而,在使用redux时,我遇到了连接问题。只有在尝试使用与基类'DockerWindow'.的连接时才会发生这种情况。如果我只在儿童'DockChat'上使用它,它就能工作。如何访问'DockerWindow'上的'store' (一个基类)?

代码语言:javascript
复制
DockerWindow
-> DockChat
-> DockOnline

错误:

代码语言:javascript
复制
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

代码语言:javascript
复制
// 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);
EN

回答 1

Stack Overflow用户

发布于 2016-05-18 09:57:22

对于‘基类’,只添加contextTypes

代码语言:javascript
复制
DockerWindow.contextTypes = {
    store: PropTypes.object
};
export default (DockerWindow);

对于孩子们来说,继续使用连接

代码语言:javascript
复制
DockOnline.contextTypes = {
    store: PropTypes.object
};
export default connect(mapStateToProps,mapDispatchToProps)(DockOnline);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37295397

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档