代码之家  ›  专栏  ›  技术社区  ›  Jakub Kopyś

React Redux组件不更新

  •  4
  • Jakub Kopyś  · 技术社区  · 6 年前

    我正在尝试使用React+Redux(SSR和Thunks)实现auth(注册/退出)。我不知道为什么Redux状态更新时组件没有更新。。。

    这是应重新招标的组件:

    class Navbar extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          loggedIn: props.authentication.loggedIn
        };
      }
    
      render() {
        let links = null;
        if (this.state.loggedIn) {
          links = ...
        } else {
          links = ...
        }
    
        return (<Toolbar>{links}</Toolbar>)
      }
    }
    
    const mapStateToProps = state => {
      return {
        authentication: state.authentication
      }
    }
    
    const mapDispatchToProps = dispatch => {
      return {
        signOut: () => {dispatch(userActions.logout())}
      }
    }
    
    const AuthNavbar = connect(mapStateToProps, mapDispatchToProps)(Navbar)
    export default AuthNavbar;
    

    这就是我的减速机:

    const reducers = {
      authentication,
      registration,
      alert
    }
    
    const todoApp = combineReducers(reducers)
    export default todoApp
    

    身份验证缩减器:

    const authentication = (state = initialState, action) => {
      switch (action.type) {
        ...
        case userConstants.LOGIN_SUCCESS:
          return Object.assign({}, state, {
            loggedIn: true,
            loggingIn: false,
            user: action.user
          });
        ...
        default:
          return state;
      }
    }
    

    操作-登录:

    function login(email, password) {
      return dispatch => {
        dispatch({type: userConstants.LOGIN_REQUEST, email});
        userService.login(email, password).then(
            user => {
              dispatch({type: userConstants.LOGIN_SUCCESS, user});
            },
            error => {
              dispatch({ type: userConstants.LOGIN_FAILURE });
              dispatch({type: alertActions.error(error)});
            }
       );
      }
    }
    

    用户服务。登录是一个调用和api witch fetch的函数。 看起来操作应该被触发,Redux状态得到更新,但组件没有更新: enter image description here 仔细检查Redux开发工具-状态确实得到更新,所以我使用connect实用程序的方式一定有问题?

    2 回复  |  直到 6 年前
        1
  •  4
  •   Sagiv b.g    6 年前

    您正在存储 logedin 道具在状态内 constructor ,在组件的生命周期内只运行一次。
    当新道具返回时,您不会更新状态。

    直接使用道具:

    if (this.props.authentication.loggedIn) {
          links = ...  
    

    或更新中的状态 componentWillReceiveProps

    componentWillReceiveProps(nextProps){
      // update the state with the new props
      this.setState({
          loggedIn: nextProps.authentication.loggedIn
      });
    }
    
        2
  •  2
  •   Ross Allen    6 年前

    你的 render 功能依赖于 state.loggedIn 但是 状态loggedIn公司 没有改变;只有 this.props.authentication.loggedIn 正在根据操作进行更改。当前形式的组件不需要状态。您可以将其删除以使其正常工作:

    class Navbar extends React.Component {
      render() {
        let links = null;
        if (this.props.authentication.loggedIn) {
          links = ...
        } else {
          links = ...
        }
    
        return (<Toolbar>{links}</Toolbar>)
      }
    }