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