web-dev-qa-db-ja.com

React-reduxコンポーネントは、ストアの状態が変化しても再レンダリングされません

今日はリアクションとリデュースを学びたいと言っていますが、状態の変更後にコンポーネントを強制的に再レン​​ダリングする方法はわかりません。

ここに私のコードがあります：

const store = createStore(loginReducer);
export function logout() { return {type: 'USER_LOGIN'} }
export function logout() { return {type: 'USER_LOGOUT'} }
export function loginReducer(state={isLogged:false}, action) {
  switch(action.type) {
    case 'USER_LOGIN':
      return {isLogged:true};
    case 'USER_LOGOUT':
      return {isLogged:false};
    default:


         return state;
      }
    }

    class App extends Component {

      lout(){
        console.log(store.getState()); //IT SHOW INITIAL STATE
        store.dispatch(login());
        console.log(store.getState()); //IT SHOWS THAT STATE DID CHANGE
      }

      ////THIS IS THE PROBLEM, 
    render(){
    console.log('rendering')
    if(store.getState().isLogged){
      return (<MainComponent store={store} />);
    }else{
      return (
        <View style={style.container}>
          <Text onPress={this.lout}>
          THE FOLLOWING NEVER UPDATE :( !!{store.getState().isLogged?'True':'False'}</Text>
          </View>
        );
    }    
}

更新をトリガーできる唯一の方法は、

store.subscribe(()=>{this.setState({reload:false})});

コンストラクタ内で、手動でコンポーネントの更新状態をトリガーして、強制的に再レン​​ダリングします。

しかし、ストアとコンポーネントの両方の状態をリンクするにはどうすればよいですか？

reactjsreact-nativereduxreact-redux
13
Zalaboza

コンポーネントは、状態またはプロップが変更された場合にのみ再レンダリングされます。 this.stateやthis.propsに依存するのではなく、レンダー関数内でストアの状態を直接フェッチします。

代わりに、connectを使用して、アプリケーションの状態をコンポーネントプロパティにマップする必要があります。コンポーネントの例：

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

export class App extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div>
            {this.props.isLoggedIn ? 'Logged In' : 'Not Logged In'}
            </div>
        );
    }
}

App.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        isLoggedIn: state.isLoggedIn
    };
}

export default connect(mapStateToProps)(App);

この非常に単純化された例では、ストアのisLoggedIn値が変更されると、コンポーネントの対応するプロップが自動的に更新され、レンダリングが行われます。

始めるのに役立つreact-reduxのドキュメントを読むことをお勧めします。 http://redux.js.org/docs/basics/UsageWithReact.html

19
Danny