使用Reactjs使用Redux提供程序存储-错误存储没有有效的还原器。

Question

我正在着手一个项目，其中包括使用类型记录/反应/还原与黄金布局。我有一些问题，让Redux的供应商商店与反应。我已经做了一些以前的搜索，并遇到了以下问题：

如何使用Redux提供程序

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

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;

您可以看到，基本上，我的类正在做的是通过注册带有金色布局的react组件来设置一个黄金布局界面。因此，为了与redux一起工作，我定义了wrapComponent函数来返回要注册但包装在Redux提供程序中的function组件。

我遵循了我在上面链接的问题中概述的模式，使用了context.store和store: PropTypes.object.isRequired

但是，当我运行应用程序时，我从浏览器控制台得到以下错误：

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

在这种情况下，在我的浏览器控制台中，我得到了错误：

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

对于Redux，我还不完全确定这意味着什么，但在我看来，store是没有定义的，因此没有一个有效的还原器。但是，根据我喜欢的问题，这应该是可行的。

这里有什么问题吗？

下面是我的根应用程序和根还原程序的代码：

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')
);

我将rootReducers保留为空，以便将来的开发人员可以将他们的代码添加到其中：

import { combineReducers } from 'redux';

// Import your reducers here

const rootReducer = combineReducers({
    // Add your reducers here
});

export default rootReducer;

--我也尝试过以下几种方法：

在我的根应用程序中，将存储定义为const store:<any> = createStore(state=>state, initialState)而不是const store:<any> = createStore(rootReducer, initialState)

在我的根还原器中，尝试指定一个空白还原器：blank: function(state, action) {if (state == null) state = [] return state;}

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

Answer 1

下面是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的内容

**编辑**为您所做的组件提供存储，首先设置Provider

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


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

然后在您的组件中调用高阶函数connect --这将将您的组件连接到存储区，详细说明在医生们中

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