如何在应用入口文件（App.js/Index.js）中映射state到props？

你当前用subscribe手动同步state的方式确实不够优雅，而且容易引入不必要的状态同步逻辑。其实完全可以利用React-Redux的connect来解决这个问题，核心思路是把Spinner封装成一个连接Redux的独立组件，让它自己从store中获取状态，而不用在入口组件里手动维护。

解决方案步骤 #

1. 封装ConnectedSpinner容器组件
   把Spinner变成一个能直接从Redux store读取状态的容器组件，这样它就可以自主控制显示/隐藏，不需要上层组件传递状态：

// 推荐单独放在components/ConnectedSpinner.js文件中
import React from 'react';
import { connect } from 'react-redux';
import Spinner from 'react-native-loading-spinner-overlay';

// 纯UI组件，只负责接收props渲染
const SpinnerUI = ({ visible, text }) => (
  <Spinner
    visible={visible}
    textContent={text}
    textStyle={{ color: '#000' }}
  />
);

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  visible: state.AppReducer.spinner.visible,
  text: state.AppReducer.spinner.text,
});

// 用connect包裹，生成容器组件
export default connect(mapStateToProps)(SpinnerUI);

2. 重构App入口组件
   移除原来的subscribe逻辑和本地的spinner状态，把Provider包裹整个应用内容（包括封装后的Spinner），确保所有连接Redux的组件都能访问到store：

import React from 'react'
import { Provider } from 'react-redux'
import { View } from 'react-native'
import { createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import reducers from './reducers'
import Routes from './config/routes'
import { getReady } from './services/registration'
import { setAppInitialLoad, setAppSpinner } from './actions/AppActions'
import ConnectedSpinner from './components/ConnectedSpinner'; // 引入封装好的组件

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      initialized: false,
    }
    // 移除原来的subscribe代码
  }

  componentDidMount() {
    store.dispatch(setAppSpinner({ visible: true, text: 'Loading...'}))
    getReady().then(response => {
      store.dispatch(setAppInitialLoad(response.data.data))
      store.dispatch(setAppSpinner({ visible: false, text: ''}))
      this.setState({initialized: true})
    })
  }

  render() {
    if (this.state.initialized) {
      return (
        <Provider store={store}>
          <View style={{ flex: 1 }}>
            <Routes/>
            {/* 直接使用ConnectedSpinner，它会自动从store获取状态 */}
            <ConnectedSpinner />
          </View>
        </Provider>
      )
    } else {
      return (
        <View style={{backgroundColor: 'yellow', flex: 1}}/>
      )
    }
  }
}

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
export default App;

为什么这个方案更好？ #

• 符合React-Redux最佳实践：将UI渲染和状态逻辑分离，ConnectedSpinner专注于展示，状态完全由Redux管理，避免了手动同步的冗余代码。
• 减少bug风险：移除了手动对比state和更新本地状态的逻辑，避免了因同步不及时导致的显示异常。
• 代码结构更清晰：入口组件只负责应用初始化和路由挂载，Spinner的状态逻辑由自身组件处理，职责单一。

额外小提示 #

如果不想单独拆分组件，也可以直接用connect包裹App组件，但需要注意Provider必须在被连接的组件外层。不过拆分独立组件更符合单一职责原则，也更便于后续维护和复用。

内容的提问来源于stack exchange，提问作者Marco Jr