Question

问题是当我在Redux中更新状态时，React不运行渲染功能。我是Redux的初学者，所以我不知道到底应该做些什么才能解决这个问题。我读到了@connect函数，但是当我使用CreateReactApp CLI工具时，我无法在没有弹出的情况下为装饰器提供支持（我不想这样做）。

组件：

import React from "react";
import Store from "../store";

Store.subscribe(() => {
  console.log(Store.getState().Auth);
});

export default class Login extends React.Component {
  login = () => {
    Store.dispatch({ type: "AUTH_LOGIN" });
    // this.forceUpdate(); If I forceUpdate the view, then it works fine
  };
  logout = () => {
    Store.dispatch({ type: "AUTH_LOGOUT" });
    // this.forceUpdate(); If I forceUpdate the view, then it works fine
  };
  render() {
    if (Store.getState().Auth.isLoggedIn) {
      return <button onClick={this.logout}>Logout</button>;
    } else {
      return <button onClick={this.login}>Login</button>;
    }
  }
}

减速机：

export default AuthReducer = (
  state = {
    isLoggedIn: false
  },
  action
) => {
  switch (action.type) {
    case "AUTH_LOGIN": {
      return { ...state, isLoggedIn: true };
    }
    case "AUTH_LOGOUT": {
      return { ...state, isLoggedIn: false };
    }
  }
  return state;
};

任何人都可以指出我正确的方向吗？感谢

Answer 1

您可以使用connect HOC代替装饰器，它可以像

一样实现

import { Provider, connect } from 'react-redux';
import Store from "../store";

class App extends React.Component {
    render() {
       <Provider store={store}>
          {/* Your routes here */}
       </Provider> 
   }
}


import React from "react";
//action creator
const authLogin = () => {
    return { type: "AUTH_LOGIN" }
}

const authLogout = () => {
    return { type: "AUTH_LOGOUT" }
}

class Login extends React.Component {
  login = () => {
     this.props.authLogin();
  };
  logout = () => {
    this.props.authLogout();
  };
  render() {
    if (this.props.Auth.isLoggedIn) {
      return <button onClick={this.logout}>Logout</button>;
    } else {
      return <button onClick={this.login}>Login</button>;
    }
  }
}

const mapStateToProps(state) {
   return {
      Auth: state.Auth
   }
}

export default connect(mapStateToProps, {authLogin, authLogout})(Login);

即使Redux状态发生更改，React也不会更新视图

1 个答案: