Reduxストアがその値を更新した後、コンポーネントの状態計算プロパティが更新されないのはなぜですか？

Question

Reduxストアがその値を更新した後、コンポーネントの状態計算プロパティが更新されないのはなぜですか？

私はいくつかのヘルパーメソッドを使用して、AppStore.getState（）を介してサブストアを取得しています。私のisAuthenticated状態プロパティのApiStore。このストア値が更新されると、コンポーネントの状態値は更新されないようです。 React Nativeは計算されたコンポーネントの状態プロパティにストア更新を監視しませんか？

私のコンポーネントは、以下のようになります。

// Vendor 
import React, { Component } from 'react' 
import { AppRegistry, Text, View, StyleSheet, TextInput, Button} from 'react-native' 
import AppStore from './Stores/AppStore' 
import StoreHelpers from './Stores/StoreHelpers' 

// Custom 
import Login from './Components/Login/Login' 
import Api from './Services/Api.js' 

// Styles 
const styles = StyleSheet.create({ 

    mainView: { 
    flex: 1, 
    padding: 20, 
    marginTop: 30, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: '#3b5998', 
    }, 

}); 

// Main App Component 
export default class Main extends Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
     isLoading: false, 
     isAuthenticated: !StoreHelpers.getApiStore().userBalanceResponse.error // Computed property from store 
    } 

    // Enable this for debugging 

    console.log(this.state) 

    AppStore.subscribe(() => { 
    console.log(AppStore.getState()) 
    }) 

    } 

    render() { 
    return (
     <View style={styles.mainView}> 
     <Login /> 
     </View> 
    ) 
    } 
} 

// skip this line if using Create React Native App 
// AppRegistry.registerComponent('AwesomeProject',() => Main); 

Answer 1

コンポーネントがストアに登録されていませんので、あなたはそれを見ることはできません。店舗と関係があるのは、reduxの仕事です。NOT React Nativeです。したがって、あなたのコンポーネントをreact-redux内にラップしてmapStateToPropsに渡して、正しい計算値を取得する必要があります。

// ... rest of imports 
import { connect } from 'react-redux'; 

// Main App Component 
class Main extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     isLoading: false, 
     isAuthenticated: this.props.isAuthenticated, 
    } 

    // ... rest of code 

    } 

    // ... rest of code 
} 

const mapStateToProps = (store) => ({ 
    isAuthenticated: !userBalanceResponse: store.userBalanceResponse.error, 
}); 

export default connect(mapStateToProps, null)(Main); 

あなたが適切Reduxの店をセットアップすることを確認して、それを動作させるために。ルートコンポーネントをプロバイダコンポーネント内にラップし、ストアコンポーネントに渡します。それは、次のようになり、あなたのルートコンポーネントをアプリケーションと呼ばれていると仮定します

import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 
import Main from 'path-to-main/Main'; 

// we will pass this store to the Provider 
const store = createStore(
    reducer, 
    // ... middlewares etc this is optional 
); 

export default class App extends Component { 
    render() { 
    return(
     <Provider store={store}> 
     <Main /> 
     </Provider> 
    ) 
    } 
}