今天我要学习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})});

在构造函数内部,所以我手动触发组件的更新状态以强制重新加载.

但是我如何链接存储和组件状态呢?

推荐答案

只有当组件的状态或props 发生更改时,组件才会重新渲染.你不是在依赖这个.国家或这个.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值发生更改,它将自动更新组件上相应的props ,从而使其渲染.

我建议阅读react redux文档以帮助您开始:

Reactjs相关问答推荐

如何使用React Router创建响应式主详细信息应用程序?

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

如何在关闭和打开此 Select 输入时应用旋转效果?

当列表中的项的顺序改变并且使用唯一键作为它们的索引时,Reaction如何看待呈现方面?

for each 子级加载父路由加载器

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

如何使用useState响应快速/顺序状态更新

React路由dom布局隐藏内容

React 为什么标签导致 onClick 事件运行 2 次?

使用获取的数据更新状态,但在try console.log 时它给出未定义

react :输入失go 焦点,输入一个字符,

预期无限重新渲染但没有发生

React-router-dom的链接不改变路由(ReactRouter6)

臭名昭著的测试未包含在 act(...) 中

MUI TextField Select 菜单的最大高度

使用 Jest/React 测试库时,如何测试由 setInterval 函数创建的 DOM 更改?

如何在对话素材ui中设置边框半径?

刷新页面时状态改变问题

React Router 6.4CreateBrowserRouter子元素不显示

如何防止 mui x-date-picker 被截断?