React / Redux 自定义中间件 - useDispatch 不更新状态

Question

我想创建一些中间件来检查令牌 expires_at 字段，必要时刷新令牌并更新令牌字段的状态。

我使用 redux 工具包创建了 redux 功能，利用了切片。我有一个切片将使用令牌数据更新状态，这适用于初始令牌的回调。

创建中间件时，我无法获取要调用的切片，因此状态保持不变。

作为没有 api 调用的简单峰值：

import { useSelector, useDispatch } from 'react-redux';
import { setTokens } from '../features/tokens/tokenSlice';

const refresher = () => ({ dispatch, getState }) => (next) => (action) => {
    const exp_at = useSelector((state) => state.tokens.expires_at);

    if(hasBreachedThreshold(exp_at)){
        dispatch = useDispatch();
        dispatch(
            setTokens({
            access_token: 'new token',
            expires_at: 637423776000000000, -- hard coded date way in the future.
        })
    }
    
    ... else carry on.
);

我希望在调用中间件时，第一遍 hasBreachedThreshold() returns true 并且分派方法将调用 slice reducer 并更新状态。任何进一步的运行都会通过，因为 hasBreachedThreshold() 会 return false - 无论如何一段时间。

但发生的事情是 hasBreachThreshold 始终 return 为假，因为状态永远不会更新，从而导致无限循环。

中间件配置正确并被调用。 expires_at 值是从状态中提取的。 hasBreachThreshold() 已经过全面测试并且行为正确。

作为 React / Redux 的新手，我希望我对如何以及何时使用分派的理解是错误的。我假设我可以像在我的组件中那样使用 dispatch，不是这样吗？还是我的做法完全错误？

Answer 1

编写中间件时，您已经拥有 dispatch 函数和 Redux 存储 available through the function params:

// Use `dispatch` & `getState`
const refresher = () => ({ dispatch, getState }) => (next) => (action) => {
    const exp_at = getState().tokens.expires_at;

    if(hasBreachedThreshold(exp_at)){
        dispatch(
            setTokens({
            access_token: 'new token',
            expires_at: 637423776000000000, -- hard coded date way in the future.
        })
    }
);

还有你在什么时候使用React hooks的本质错误，参考Rules of Hooks。

挂钩在 Redux 中间件的上下文中不可用。

React / Redux 自定义中间件 - useDispatch 不更新状态

React / Redux custom middleware - useDispatch not updating the state

reactjs

redux

redux-middleware

redux-toolkit