我要说的是今天要学习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})});
在构造函数内部,以便我手动触发组件的更新状态以强制重新渲染。
但是如何链接存储状态和组件状态?
仅当组件的状态或道具发生更改时,组件才会重新渲染。您不是依靠this.state或this.props,而是直接在render函数中获取存储的状态。
相反,您应该使用connect将应用程序状态映射到组件属性。组件示例:
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值发生更改,它将自动更新组件上的相应prop,从而使其呈现。
我建议阅读react-redux文档以帮助您入门:https: //redux.js.org/basics/usage-with- react