React-redux組件不會在商店狀態更改時重新提交

Question

我在說要今天學習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})}); 

內部構造，讓我手動觸發組件的更新狀態強制重新呈現。

但我怎樣才能連接存儲和組件狀態？

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值的變化，它會自動更新您的組件上相應的道具，這將導致其呈現。

我建議您閱讀反應，終極版的文檔，以幫助您開始： http://redux.js.org/docs/basics/UsageWithReact.html