React-redux 구성 요소가 저장소 상태 변경시 다시 렌더링되지 않습니다.

Question

오늘 반응 및 절약을 배우 겠다는 내용의 진술을하고 있지만 상태 변경 후에 구성 요소가 강제로 다시 렌더링되도록하는 방법을 알 수 없습니다. 내가 업데이 트를 게재 할 수

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})}); 

를 사용하여 :

여기 내 코드입니다.

하지만 어떻게 저장소와 구성 요소 상태를 모두 연결할 수 있습니까?

Answer 1

구성 요소가 상태 또는 소품이 변경된 경우에만 다시 렌더링됩니다. 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 값이 변경 될 경우, 자동으로 렌더링하게됩니다 구성 요소에 해당하는 소품을 업데이트합니다.

나는 반응-REDUX 문서를 읽어 보시기 바랍니다하면 시작하는 데 도움이 : http://redux.js.org/docs/basics/UsageWithReact.html