顶层连接Redux至React应用失效 求助排查

我一眼就揪出问题所在啦！你遇到的空props/空store问题，核心原因是你在index.tsx里导入的是未经过Redux连接的原始App组件，而非已经和store绑定的版本。

具体问题点 #

在App.tsx里，你同时做了两个导出：

• export const App: 这是未被connect(mapStateToProps)包装的原始函数组件，它不会接收Redux注入的props。
• export default connect(mapStateToProps)(App): 这才是真正和Redux store关联的组件。

但在index.tsx里，你用了命名导入：import { App } from './App';，相当于直接用了那个“裸奔”的原始组件，自然拿不到Redux传递的isLoading等props，控制台打印空对象也就不奇怪了。

修复步骤 #

只需要把index.tsx里的导入语句改成默认导入即可：

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

额外优化建议（可选） #

为了避免后续再混淆两个组件，你可以给原始组件换个更清晰的名字，比如：

// App.tsx 优化后的代码
import React from 'react';
import { State } from './model/types';
import { connect } from 'react-redux';

// 给原始组件明确命名
const RawApp: React.FunctionComponent = (props) => {
  console.log(props); // 现在这里会打印包含isLoading的props了
  return <div>Hello</div>;
};

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

// 默认导出连接后的组件
export default connect(mapStateToProps)(RawApp);

这样修改后，你的Redux配置逻辑完全没问题，Provider就能正常把store的状态注入到App组件中了。

内容的提问来源于stack exchange，提问作者Aldo Fiore