Question

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

我的情况：

包装容器：即时通讯从包装容器组件传递，该组件管理所有必要的数据，向下传递到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高阶组件一起使用，与基于类的组件相同。

有关如何结合使用mapDispatchToProps和connect来分派操作的详细信息，请参见：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

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

1 个答案: