将Redux提供程序存储与Reactjs一起使用-错误存储没有有效的缩减器

我正在着手一个项目，该项目涉及使用typescript/react/redux和golden layout。我在让Redux的提供商商店与react合作时遇到一些问题。我之前做过一些搜索，发现了以下问题：

我一直遵循该问题答案中给出的建议，编写自己的代码，如下所示：

import React from 'react';
import GoldenLayout from 'golden-layout';
import {Provider} from 'react-redux';
import Default from '../modules/m-Default/Default';
import PropTypes from 'prop-types';

interface GoldenLayoutWrapperProps {}

interface GoldenLayoutWrapperState {}

class GoldenLayoutWrapper extends React.Component <GoldenLayoutWrapperProps, GoldenLayoutWrapperState> {

    public layout;
    static contextTypes = {
        store: PropTypes.object.isRequired
    };

    private wrapComponent(Component, store) {
        class Wrapped extends React.Component {
            render () {
                return (
                    <Provider store={store}>
                        <Component {...this.props}/>
                    </Provider>
                )
            }
        }
        return Wrapped;
    }

    componentDidMount() {
        var layout = new GoldenLayout(this.layoutConfig, this.layout);
        layout.registerComponent('Default', this.wrapComponent(Default, this.context.store));
    }

    render() {
        return (
            <div className="golden-layout-wrapper" ref={input => this.layout = input}/>
        )
    }

    private layoutConfig = {}
}

export default GoldenLayoutWrapper;

在此情况下，在我的浏览器控制台中，我得到以下错误：

Uncaught TypeError: Cannot read property 'object' of undefined at new GoldenLayoutWrapper

作为Redux的新手，我不能100%确定这意味着什么，但在我看来，

store

是未定义的，因此没有有效的减速机。但是，根据上面我喜欢的问题，这应该是可行的

这里有什么问题

下面是我的root应用程序和root reducer代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Store, createStore } from 'redux';
import { Provider } from 'react-redux';
import GoldenlayoutWrapper from './main/GoldenLayoutWrapper';

import rootReducer from './main/rootReducer';

const initialState = {};
const store: Store<any> = createStore(rootReducer, initialState);

ReactDOM.render(
    <Provider store={store}>
        <GoldenlayoutWrapper/>
    </Provider>,
    document.getElementById('root')
);

我还尝试了以下方法：

在我的根应用程序中，将存储定义为

const-store:=createStore（state=>state，initialState）

而不是

const-store:=createStore（rootReducer，initialState）

在我的根减速机中，尝试指定一个空减速机：

blank:function（state，action）{if（state==null）state=[]返回状态；}

---

但这两种方法都不起作用。我得到了与上面相同的错误。

以下是

Redux

的基本用法，请查看您的代码是否包含所需的所有成分：

import { createStore, combineReducers } from 'redux';


// ACTIONS
const SAMPLE_ACTION_TYPE = 'gd:SAMPLE_ACTION_TYPE';
const sampleAction = (payload) => ({
    type: SAMPLE_ACTION_TYPE,
    payload
});


// REDUCER
const sampleReducer = (state={}, action) => {
    return state;
};
const sampleTwoReducer = (state=[],action) => {
    return state;
}

// STORE
const store = createStore(
    combineReducers({
        sample:sampleReducer,
        sampleTwo:sampleTwoReducer
    })
);

// SUBSCRIBE
store.subscribe(() => {
    console.log("STORE STATE", store.getState());
});

// DISPATCH SOME ACTIONS
store.dispatch(sampleAction());

上面创建了以下输出：

STORE STATE 
{sample: {…}, sampleTwo: Array(0)}
sample:
__proto__:Object
sampleTwo:Array(0) length:0
__proto__:Array(0)
__proto__:Object

但将代码更改为：

// STORE
const store = createStore(
    combineReducers({
        sample:null,
        sampleTwo:null
    })
);

产生相同的错误，请检查传递给

combineReducer

**编辑** 要为组件提供存储，您需要做两件事，首先设置

提供程序

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';


ReactDOM.render(
    <Provider store={store}>
        <MyApp />
    </Provider >, document.getElementById('app'));

---

你的商店看起来怎么样？它是由您定义的还是您假设它应该来自提供给您的某个地方？：）在调用

createStore

的地方添加代码。这个错误意味着在创建存储时，您没有为它提供减缩器。@Lukasz'Severiaan'Grela我已经用它编辑了我的文章information@trixn我已经添加了一些信息，商店是如何传递给组件和提供商的？

// STORE
const store = createStore(
    combineReducers({
        sample:null,
        sampleTwo:null
    })
);

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';


ReactDOM.render(
    <Provider store={store}>
        <MyApp />
    </Provider >, document.getElementById('app'));

import { connect } from 'react-redux';
import React from 'react';
class MyComponent extends React.Component {
    notMapped = (payload) => {
        this.props.dispatch(sampleAction(payload));
    }
    render() {
        const {sample, mappedFunction} = this.props;
        return (
            <div>
                <p>{sample}</p>
                <button onClick={() => {
                    mappedFunction("test");
                }}>Call mapped Function</button>
                <button onClick={() => {
                    this.notMapped("test");
                }}>Call NOT mapped Function</button>
            </div>
        );
    }
}
const mapDispatchToProps = (dispatch) => ({
    mappedFunction: (payload) => dispatch(sampleAction(payload))
});
const mapStateToProps = (state) => ({
    sample: state.sample
});
export default connect(mapStateToProps,mapDispatchToProps)(MyComponent);// connect