1

我想使用 redux hook useSelector 来访问 store 并摆脱 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是否存在缺点或性能问题，还是应该避免使用类而使用简单的对象？

先感谢您

4

1 回答 1

1

这是我的减速器格式，例如受鸭子模块化redux 的启发，请查看这个darkMode减速器：

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;
  }
};
于 2019-11-14T20:48:47.273 回答