使用React - Redux时将转换登录放在何处

在使用React-Redux时，将转换登录放在Redux的Action中是一个常见的做法。Redux是一个用于管理应用程序状态的JavaScript库，它通过一个全局的状态树来管理应用程序的状态，并通过Actions来描述状态的变化。在React-Redux中，我们可以使用Redux的Action来触发状态的变化。

具体来说，将转换登录放在Redux的Action中可以按照以下步骤进行：

创建一个Redux的Action，用于描述登录状态的变化。例如，可以创建一个名为"login"的Action，用于表示用户已登录。

// actions.js
export const login = () => {
  return {
    type: 'LOGIN',
  };
};

在Redux的Reducer中处理该Action，更新应用程序的状态。Reducer是一个纯函数，它接收当前的状态和Action，并返回一个新的状态。

// reducer.js
const initialState = {
  isLoggedIn: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
      };
    default:
      return state;
  }
};

export default reducer;

在React组件中使用React-Redux的connect函数连接Redux的状态和Action。通过connect函数，我们可以将Redux的状态映射到组件的props中，并将Action映射到组件的props中的回调函数。

// LoginButton.js
import React from 'react';
import { connect } from 'react-redux';
import { login } from './actions';

const LoginButton = ({ isLoggedIn, login }) => {
  const handleLogin = () => {
    login();
  };

  return (
    <button onClick={handleLogin}>
      {isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
};

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

const mapDispatchToProps = {
  login,
};

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

在上述代码中，我们通过connect函数将Redux的状态isLoggedIn映射到组件的props中，并将login Action映射到props中的login回调函数中。当用户点击按钮时，调用login回调函数，触发登录状态的变化。

这样，当用户点击登录按钮时，Redux的Action会被触发，Reducer会更新应用程序的状态，而React组件会根据状态的变化重新渲染，从而实现转换登录的功能。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供了可靠、安全、高性能的云服务器实例，可用于部署和运行应用程序。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务，适用于存储和管理应用程序的数据。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云云数据库MySQL产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql