reactjs – React-redux组件不会在存储状态更改时重新呈现

发布时间：2020-12-15 20:50:00 所属栏目：百科来源：网络整理

导读：我今天说要学习反应和减少,但我无法弄清楚如何在状态改变后迫使组件重新渲染. 这是我的代码： const store = createStore(loginReducer);export function logout() { return {type: 'USER_LOGIN'} }export function logout() { return {type: 'USER_LOGOUT'}

我今天说要学习反应和减少,但我无法弄清楚如何在状态改变后迫使组件重新渲染.

这是我的代码：

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将应用程序状态映射到组件props.组件示例：

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文档以帮助您入门：
http://redux.js.org/docs/basics/UsageWithReact.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!