在 redux reducer 中使用自定义钩子

Question

有没有办法在我的 redux reducer 中使用自定义的 react hook？

我想在我的 switch 案例中调用 getDistanceHandler() 或 useGetDistance()，但 React 告诉我不允许在函数组件的主体之外使用钩子

在 pastebin 上查看代码：https://pastebin.com/jqhK9zee

import {
...
SET_FILTERS,
...
} from '../actions/lokale';
import Lokal from './../../models/lokal';
import useGetDistance from '../../handler/useGetDistance';

const initialState = {
...
filteredLokale: [],
...
};

const getDistanceHandler = useGetDistance();

const lokaleReducer = (state = initialState, action) => {
switch (action.type) {
    ...
    case SET_FILTERS:
        //TODO
        const filters = action.filter;
        const updatedFilteredLokale = state.lokale.filter((lokal) => {
            let bool = true;
            //Name
            if (filters[0]) {
                bool = lokal.name.toLowerCase().indexOf(filters[0].toLowerCase()) > -1;
            }
            //Category
            if (bool && filters[1]) {
                bool = lokal.category.toLowerCase().indexOf(filters[1].toLowerCase()) > -1;
            }

            if (bool && filters[2]) {
                getDistanceHandler(region.latitude, region.longitude).then((distance) => {
                   bool = distance <= filters[2];

                }); 
            }

            return bool;
        });
        return { ...state, filteredLokale: updatedFilteredLokale };

    ...
    default:
        return state;
}
};

export default lokaleReducer;

Answer 1

Hooks 是 React 的一个特性。它们使用 React API，并且完全由 React 组件生命周期管理。在 React 组件中调用时唯一执行任何类型的逻辑功能。尝试在 React 组件之外使用钩子是没有意义的。