如何在react js中使用redux进行登录

npm install react redux react-redux

import { createStore } from 'redux';

const initialState = {
  isLoggedIn: false,
  user: null,
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload,
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    default:
      return state;
  }
};

const store = createStore(authReducer);

const login = (user) => ({
  type: 'LOGIN',
  payload: user,
});

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload,
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    default:
      return state;
  }
};

import { connect } from 'react-redux';

const LoginComponent = ({ isLoggedIn, user, login }) => {
  // 组件的代码
};

const mapStateToProps = (state) => ({
  isLoggedIn: state.isLoggedIn,
  user: state.user,
});

const mapDispatchToProps = (dispatch) => ({
  login: (user) => dispatch(login(user)),
});

export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);

const LoginComponent = ({ isLoggedIn, user, login }) => {
  const handleLogin = () => {
    // 执行登录逻辑
    login({ username: 'example', password: 'password' });
  };

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, {user.username}!</p>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
};