React native 如何将状态映射到初始文件（App.js或Index.js）上的道具？

这可能是非常基本的。我的应用程序上有一个微调器，其中声明了路由和提供者。这必须读取redux存储，尤其是spinner.visible并映射到状态，以便我可以隐藏/显示

元素

但正如我所说…这是应用程序的入口文件。我知道如何使用connect将其映射到道具，但看起来我无法在我的输入文件中使用connect/MapStateTrops

这很有效，但我不认为使用订阅是最好的方式。我想让旋转器能够以优雅的方式直接阅读商店。有什么建议吗

import React from 'react'
import {Provider} from 'react-redux'
import {View} from 'react-native'
import {createStore, applyMiddleware} from 'redux'
import Spinner from 'react-native-loading-spinner-overlay'
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'

class App extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        initialized: false,
        spinner: {
            visible: false,
            text: ''
        }
    }
    store.subscribe(() => {
            //ToDo: I really hope to find an elegant solition for this.
            //Since it' the top level JS file of the app, I can't use
            //connect/mapStateToProps to map the props :(
            const spinner = store.getState().AppReducer.spinner
            if(spinner.visible != this.state.spinner.visible) {
                this.setState({
                    spinner: {
                        visible: spinner.visible,
                        text: spinner.text
                    }
                });
            }
        }
    )
}
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 (
            <View>
                <Provider store={store}>
                    <Routes/>
                </Provider>
                <Spinner visible={this.state.spinner.visible} textContent={this.state.spinner.text}
                         textStyle={{color: '#000'}}/>
            </View>
        )
    } else {
        return (
            <View style={{backgroundColor: 'yellow', flex: 1}}/>
        )
    }
}
}
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
export default App;

从“React”导入React
从“react redux”导入{Provider}
从“react native”导入{View}
从“redux”导入{createStore，applyMiddleware}
从“反应本机加载微调器覆盖”导入微调器
从“redux thunk”导入redux thunk
从“./还原程序”导入还原程序
从“/config/Routes”导入路由
从“./services/registration”导入{getReady}
从“./actions/AppActions”导入{setAppInitialLoad，setAppSpinner}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
初始化：false，
微调器：{
可见：假，
文本：“”
}
}
store.subscribe（（）=>{
//托多：我真的希望能找到一个优雅的独处。
//因为它是应用程序的顶级JS文件，所以我不能使用它
//连接/mapStateToProps以映射道具：(
常量微调器=store.getState（）.AppReducer.spinner
if（spinner.visible！=this.state.spinner.visible）{
这是我的国家({
微调器：{
可见：微调器。可见，
text:spinner.text
}
});
}
}
)
}
componentDidMount（）{
dispatch（setAppSpinner（{visible:true，text:'Loading…'））
getReady（）。然后（响应=>{
store.dispatch（setAppInitialLoad（response.data.data））
dispatch（setAppSpinner（{visible:false，文本：“”}））
this.setState（{initialized:true}）
})
}
render（）{
if（this.state.initialized）{
返回(
)
}否则{
返回(
)
}
}
}
const store=createStore（reducer，{}，applyMiddleware（ReduxThunk））
导出默认应用程序；

使用可使用存储变量 （在您的代码中，它在这里：

conststore=createStore（reducers，{}，…）

存储变量有一些方法，您可以在此处读取（）