使用 redux 挂钩时，使用 redux 动作的最佳选择是什么？

Question

I want to use redux hook useSelector to access the store and get rid of connect(), so I need to create a way to export my actions, and I'm thinking on a class with static methods, here is an example

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")
    }
}

And then I use the action methods as follows:

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>
  );
};

But I'm wondering if there is a disadvantage or performance issues to use redux in this way, or should I avoid the usage of a class and use a simple object instead?

Thank you in advance

Answer 1

this is my format of a reducer, inspired by ducks-modular-redux for example, check out this 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;
  }
};