javascript - 在顶层将 Redux 连接到我的应用程序不起作用

Question

我已经尝试调试这段代码有一段时间了，但我似乎无法理解这里的问题是什么。我试图将我的顶级应用程序连接到 redux 商店，但我总是得到一个空商店，我不明白为什么。代码如下:

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { App } from './App';
import { Store } from 'redux';
import createStore from './model/configureStore';
import { State } from './model/types';

const store: Store<State> = createStore();

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

应用程序.tsx

import React from 'react';
import { State } from './model/types';
import { connect } from 'react-redux';

export const App:React.FunctionComponent = (props) => {
    console.log(props);
    return <div>Hello</div>;
};

const mapStateToProps = (state: State) => ({
    isLoading: state.isLoading,
});

export default connect(mapStateToProps)(App);

(由于某些未知原因，上面的控制台日志将返回一个空对象)。

正在加载.ts

import { BooleanAction } from '../utils/redux-utils';

const IS_LOADING = 'IS_LOADING_GENERAL';

export const setIsLoading = (payload: boolean) =>
    <BooleanAction>{
        type: IS_LOADING,
        payload,
    };

const defaultState = true;

export const reducer = (
    state: boolean = defaultState,
    action: BooleanAction
) => {
    switch (action.type) {
        case IS_LOADING:
            return action.payload;
        default:
            return state;
    }
};

combineReducers.ts

import { ReducersMapObject, combineReducers } from 'redux';
import { reducer as isLoading } from './loading';
import { State } from './types';

const reducerMap: ReducersMapObject<State> = {
    isLoading,
};

export default combineReducers<State>(reducerMap);

configureStore.ts

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './combineReducers';

export default () => createStore(rootReducer, applyMiddleware(thunk));

该代码对我来说似乎是正确的，但它没有给我预期的结果。只是为了让它更加困惑，如果我不将我的应用程序包装在 <Provider> 中在ReactDOM.render()函数，一切正常，但我想在顶层处理一些加载状态，所以我需要它以这种方式工作。

提前谢谢您!!

Answer 1

在 index.ts 中，您将导入命名的 App 组件，而不是默认连接的 App:

import { App } from './App';

应该是这样

import App from './App';