React-redux 组件不会在商店状态更改时重新渲染 [英] React-redux component does not rerender on store state change

问题描述

我今天打算学习 react 和 redux，但我不知道如何在状态更改后强制组件重新渲染.

这是我的代码:

const store = createStore(loginReducer);导出函数 logout() { return {type: 'USER_LOGIN'} }导出函数 logout() { return {type: 'USER_LOGOUT'} }导出函数 loginReducer(state={isLogged:false}, action) {开关(动作.类型){案例'USER_LOGIN':返回 {isLogged:true};案例'USER_LOGOUT':返回 {isLogged:false};默认:返回状态；}}类 App 扩展组件 {劳特(){console.log(store.getState());//它显示初始状态store.dispatch(登录());console.log(store.getState());//它表明状态确实发生了变化}////这就是问题，使成为(){console.log('渲染')if(store.getState().isLogged){return (<MainComponent store={store}/>);}别的{返回 (<视图样式={style.container}><Text onPress={this.lout}>以下永远不会更新:(!!{store.getState().isLogged?'True':'False'}</Text></查看>);}}

触发更新的唯一方法是使用

store.subscribe(()=>{this.setState({reload:false})});

在构造函数内部，以便我手动触发组件的更新状态以强制重新渲染.

但是我如何链接商店和组件状态?

解决方案

您的组件只有在其状态或道具发生更改时才会重新渲染.您不依赖 this.state 或 this.props，而是直接在渲染函数中获取商店的状态.

相反，您应该使用 connect 将应用程序状态映射到组件 props.组件示例:

import React, { PropTypes } from 'react';从'react-redux'导入{连接}；导出类 App 扩展 React.Component {构造函数(道具，上下文){超级(道具，上下文)；}使成为() {返回 (<div>{this.props.isLoggedIn ?已登录":未登录"}

);}}App.propTypes = {isLoggedIn: PropTypes.bool.isRequired};函数 mapStateToProps(state, ownProps) {返回 {isLoggedIn: state.isLoggedIn};}导出默认连接(mapStateToProps)(应用程序)；

在这个非常简单的例子中，如果 store 的 isLoggedIn 值发生变化，它会自动更新你组件上相应的 prop，这将导致它呈现.

我建议阅读 react-redux 文档以帮助您入门:https://redux.js.org/basics/usage-with-react

I'm stating to learn react and redux today, yet I cannot figure out how to force component to rerender after state change.

Here is my code:

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>
        );
    }    
}

The only way i could trigger update is by using

store.subscribe(()=>{this.setState({reload:false})});

inside constructor, so that i manually trigger an update state of component to force rerender.

but how can i link both store and component states ?

解决方案

Your component is only going to re-render if its state or props are changed. You are not relying on this.state or this.props, but rather fetching the state of the store directly within your render function.

Instead, you should use connect to map the application state to component props. Component example:

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);

In this very simplified example, if the store's isLoggedIn value changes, it will automatically update the corresponding prop on your component, which will cause it to render.

I suggest reading the react-redux docs to help you get started: https://redux.js.org/basics/usage-with-react

这篇关于React-redux 组件不会在商店状态更改时重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！