React-redux 组件不会在商店状态更改时重新渲染

IT技术 reactjs react-native redux react-redux
2021-04-20 19:12:18

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

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

但是我怎样才能同时链接商店和组件状态呢？

2个回答

您的组件只会在其状态或props发生更改时重新渲染。您不依赖 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);

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

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

@KennyWorden 我知道现在回答可能为时已晚。但是不，您不需要 propTypes。PropTypes 只是变量的类型声明。它们在这里没有任何其他用途，而 thunk 中间件需要使用连接功能。daveceddia.com/what-is-a-thunk
2021-05-25 19:12:18
我的组件中有完全相同的流程，当更改组件对它做出反应时，我的其他值但有一个属性不会触发重新渲染，即使在 redux 中更改了值存储任何想法？
2021-06-03 19:12:18
是否App.propTypes需要使用connect()？看起来你只是把它扔进去了。
2021-06-04 19:12:18
非常感谢！
2021-06-15 19:12:18

我最终来到这里是因为我写了一个糟糕的减速器。我有：

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign(state, {                     // <- NB no {}!
        q: action.data,
      })

    default:
      return state;
  }
}

我需要：

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign({}, state, {                 // <- NB the {}!
        q: action.data,
      })

    default:
      return state;
  }
}
其它你可能感兴趣的问题
上一篇无法在react应用程序中将对象转换为原始值错误？ 下一篇react-router“无法获取 /*”，除了根 url