时间戳

首页 > 解决方案 > 将reducer从react redux转换为hook

javascript - 将reducer从react redux转换为hook

问题描述

我正在制作一个登录/注册应用程序。我正在尝试将基于类的组件的减速器转换为与钩子一起使用。这是减速机：

import { SET_CURRENT_USER, USER_LOADING } from "../actions/types";

const isEmpty = require("is-empty");

const initialState = {
  isAuthenticated: false,
  user: {},
  loading: false
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
    case USER_LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
}

如何将其转换为减速器以用于钩子功能组件？

这是我的登录组件：

function Login (props) {
 
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const [errors, setErrors] = useState([]);
 useEffect(() => {
    if (props.auth.isAuthenticated) {
      props.history.push("/dashboard");
    }
  });
useEffect(() => {
    if (props.auth.isAuthenticated) {
      props.history.push("/dashboard");
    }
  }, [props.auth]);
const onSubmit = e => {
    e.preventDefault();

    const userData = {
      email: email,
      password: password
    };

    props.loginUser(userData);
  };
 form data....

标签： javascriptreactjs

解决方案

你可以使用useDispatch, useSelector从react-redux

import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();

const user = useSelector(getUser); 
// you can pass your selector function to useSelector(state => state.user)

在useEffectHook 中，您可以使用它dispatch()来调度您的操作

 useEffect(() => {
    dispatch(your action goes here);
  },[])

推荐阅读