Как сопоставить состояние с реквизитом в исходном файле (App.js или Index.js)? - PullRequest
Новая
       8

Как сопоставить состояние с реквизитом в исходном файле (App.js или Index.js)?

0 голосов
/ 26 мая 2018

Это, наверное, что-то очень простое.В моем приложении есть блесна, в которой указаны маршруты и провайдеры.Это должно быть чтение излишнего хранилища, в частности spinner.visible и map to state, чтобы я мог скрыть / показать элемент <Spinner>.

Но, как я уже сказал ... это входной файл приложения,Я знаю, как сопоставить его с реквизитами, используя connect, но похоже, что я не могу использовать connect / mapStateToProps в моем файле ввода.

Это работает очень хорошо, но я не думаю, что использование подписки являетсялучший способ.Я бы хотел, чтобы спиннер мог читать магазин элегантно.Есть предложения? 

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;

1 Ответ

0 голосов
/ 26 мая 2018

Использование может использовать переменную хранилища (В вашем коде это здесь: const store = createStore(reducers, {}, ...)

переменная хранилища имеет некоторый метод, вы можете прочитать здесь (https://redux.js.org/basics/store)

...