реактивное-родное установить глобальное состояние и перезвонить, используя приставку - PullRequest
0 голосов
/ 15 октября 2018

Я пытаюсь передать состояние глобально, используя приставку.Я хочу, чтобы на первом экране я сгенерировал randomNumber и установил его на global state.

Затем я перехожу к следующему экрану, и когда я переключаю кнопку, я перезваниваю global state randomNumber.Ниже мой код:

App.js

    import { createStore } from 'redux'
    import { Provider } from 'react-redux'
    import { createDrawerNavigator, createStackNavigator, } from 'react-navigation'

    const initialState = {randomNumber:''}
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case 'UPDATE':
                return { randomNumber: state.randomNumber}
      }
        return state
    }

    const store = createStore(reducer)

    class App extends Component {
      render(){
        return(
          <Provider store={store}>
            <View style={{flex:1,backgroundColor:'transparent'}}>
              <AppDrawerNavigator/>
            </View>
          </Provider>
        )
      }
    } 

FirstScreen.js

Здесь я генерирую случайное число и передаю состояние глобально.

import { LoginButton, AccessToken } from 'react-native-fbsdk';
import {connect} from 'react-redux'

class FirstScreen extends Component{

  GenerateRandomNumber = () => {
  var RandomNumber = Math.floor(Math.random() * 100) + 1 ;
  this.setState({ RandomNumber : RandomNumber },
  () => console.log(this.state.RandomNumber))
  }

  render() {
  return(
  <View>
    <Text>{this.state.RandomNumber}</Text>
    <Button title="Generate Random Number" onPress={this.GenerateRandomNumber} />
 </View>

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

export default connect(mapStateToProps, null)(FirstScreen)

SecondScreen.js

Здесь, когда я пытаюсь перезвонить глобальному состоянию randomNumber, я получаю неопределенное значение.

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {connect} from 'react-redux'

class SecondScreen extends Component {
    render() {
        return (
        <View>
          <Button
                  title="Get global State"
                  onPress={() => this.props.globalState()}/>
          <Text>{this.props.randomNumber}</Text>
        </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

function mapDispatchToProps(dispatch) {
    return {
        globalState: () => dispatch({ type: 'UPDATE' }),
    }
}

export default connect(mapStateToProps, null)(SecondScreen)

Мой вопрос: во втором экранеЯ хочу позвонить на номер global state randomNumber, но я получаю неопределенный ответ.

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

1 Ответ

0 голосов
/ 15 октября 2018

Я думаю, что на вашем первом экране у вас есть

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

, но при настройке состояния вы используете

 this.setState({ RandomNumber : RandomNumber }

Я думаю, что это должно быть

this.setState({ randomNumber: RandomNumber }

Также может быть, вы пропустили диспетчерское действие на первом экране, чтобы установить глобальное состояние.Используя только this.setState, вы устанавливаете локальное состояние компонента.Чтобы установить глобальное состояние, вы должны отправить действие.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...