我今天打算学习 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,而是直接在渲染函数中获取存储的状态。
相反,您应该使用 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
关于reactjs - React-redux 组件不会在存储状态更改时重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38678255/