如何使用 react-redux 在功能组件中调用动作创建者？

Question

我正在学习 react-redux。我在功能组件中使用 redux 有点挣扎。如何从功能组件调用操作。我看过一些使用 react hooks 的教程。这对我来说很有意义。但是这些教程调用动作类型而不是创建动作类型的函数。

我的情况：

包装容器：我从管理所有数据的包装容器组件传递给LoadedNavbar函数：

<LoadedNavbar isAuthenticated = {isAuthenticated} profile = {profile} />

功能组件：带有注销按钮的导航栏。应该在功能组件中调用注销操作。如何使操作创建logout器在此功能中可用？

import React, { Component } from "react";
import { logout } from "../../../../actions/auth";
import { Link } from "react-router-dom";

export function LoadedNavbar (props) {

    const {isAuthenticated, profile} = props


  return (

   <div> 

   <button onClick={this.props.logout} className="nav-link btn btn-info btn-sm text-light">Logout</button> 

   </div>

   )
}

行动

// LOGOUT USER
export const logout = () => (dispatch, getState) => {
  axios
    .post(apiBase + "/auth/logout/", null, tokenConfig(getState))
    .then(res => {
      dispatch({
        type: LOGOUT_SUCCESS
      });
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
    });
};

减速器

export default function(state = initialState, action) {
  switch (action.type) {
    case LOGOUT_SUCCESS:
    default:
      return state;
  }
}

Answer 1

有两种方法可以从功能组件分派动作：

• 使用mapDispatachToProps具有connect高阶组件的函数，与基于类的组件相同。

  有关如何使用mapDispatchToPropswithconnect调度动作的详细信息，请参阅：React Redux - Connect: Dispatching Actions with mapDispatchToProps

• 使用useDispatch提供挂钩react-redux。

  如果你想使用这个钩子，那么你需要从react-redux包中导入它。这个钩子返回一个可用于分派动作的函数。

  例子：

  import React from "react";
  import { logout } from "../../../../actions/auth";
  import { useDispatch } from "react-redux";
  
  function LoadedNavbar (props) {
      ...
  
      const dispatch = useDispatch();
  
      const handleClick = () => {
          dispatch(logout());
      }
  
      return (
         <div> 
           <button onClick={handleClick}>Logout</button> 
         </div>
      )
  }
  

  有关 提供的钩子的详细信息react-redux，请参阅React Redux - Hooks