javascript - 使用 redux hooks 时使用 redux Action 的最佳选择是什么？

Question

我想使用 redux hook useSelector 来访问商店并摆脱 connect()，所以我需要创建一种方法来导出我的操作，我正在考虑使用静态方法的类，这里是一个示例

export default class AuthActions {
    static async login(userData) {
        try {
            const user = await axios.post('http://localhost:5000', userData);

            dispatch({
                type: AUTH.LOGIN,
                payload: user.data
            })
        } catch (error) {
            dispatch({
                type: SET_ERROR,
                payload: error
            })
        }
    }

    static setUser() {
        console.log("SET USER")
    }

    static logout() {
        console.log("Logout")
    }
}

然后我使用如下操作方法:

import React from 'react';
import AuthActions from '../../redux/actions/AuthActions';
import { useSelector } from 'react-redux';


export default const Login = () => {
  //More logic....
  const { isAuth } = useSelector((state) => state.auth);

  const submitHandler = e => {
    e.preventDefault();
    AuthActions.login(userData)
  }

  return (
    <form onSubmit={submitHandler}>
      My Login form ....
    </form>
  );
};

但我想知道以这种方式使用 redux 是否存在缺点或性能问题，还是我应该避免使用类并使用简单的对象来代替？

提前致谢

Answer 1

这是我的 reducer 格式，灵感来自 ducks-modular-redux 例如，看看这个 darkMode reducer:

export const constants = {
  TOGGLE: "darkMode/TOGGLE"
};

export const actions = {
  toggleDarkMode: () => {
    return {
      type: constants.TOGGLE
    };
  }
};

export const thunks = {
  toggleDarkMode: () => {
    return (dispatch, getState) => {
      dispatch(actions.toggleDarkMode());
      const isDark = getState().darkMode.isDark;
      localStorage.setItem("isDark", isDark);
    };
  }
};

const initialState = { isDark: localStorage.getItem("isDark") === "true" };

export default (state = initialState, action) => {
  switch (action.type) {
    case constants.TOGGLE:
      return {
        isDark: !state.isDark
      };
    default:
      return state;
  }
};