Redux thunk 函数未执行

Posted 2023-02-22

【中文标题】Redux thunk 函数未执行

【英文标题】：Redux thunk function not being executed

【发布时间】：2022-01-17 09:43:47

【问题描述】：

我最近开始研究 redux thunk。据我了解，它应该用于处理异步操作或需要从其他操作中调度操作的地方。所以我的商店配置如下：

import applyMiddleware, createStore from "redux";
import rootReducer from "./rootReducer";
import thunk from "redux-thunk";
import  composeWithDevTools  from 'redux-devtools-extension'; // used by redux-devtools to visualize redux in browser

const store = createStore(rootReducer, composeWithDevTools(
    applyMiddleware(thunk),
    // other store enhancers if any
));

export default store;

我的减速器看起来像：

const INITIAL_STATE = 
    user: null,


export const authReducer = (state = INITIAL_STATE, action) => 
    switch (action.type) 

        case actionTypes.REGISTER_NEW_USER:
            const newUser = action.payload
            return 
                ...state,
                'user': newUser
            
        default:
            return state;
    

我的 thunk 如下（请注意，为了简单起见，我注释掉了进行异步调用的部分，而我只是测试了我的 thunk 的功能）：

// Thunks
export const registerUser = (userData) => 
    console.log("HERE")
    return async (dispatch) => 
        let user = new User();
        try 
            let newUserData;
            console.log(userData)
            // newUserData = await user.register(userData);
            newUserData = 
                'email': '[e-mail]',
                'token': '234jk23hjkhaSDASD',
            
            console.log("here in thunk")
            console.log(newUserData)
            cookie.set("user", newUserData.email);
            cookie.set("token", newUserData.token);
            // dispatch(createNewUser(newUserData));
            dispatch(
                type: actionTypes.REGISTER_NEW_USER,
                payload: newUserData
            )
         catch(e) 
            console.log(e);
        

    

和我的组件：

const dispatch = useDispatch();

    const onSubmit = data => 
        dispatch(registerUser(data));

    

我已经为这些编写了一些测试，但是在执行它们时，它们似乎没有运行 thunk 函数。 registerUser 中的 console.log("HERE") 语句已执行，但返回方法中的日志均未执行。我错过了什么？

附带问题，不如上一个重要：现在我使用的是 Thunks，我的所有操作都需要是 thunk 吗？还是可以将 thunk 和动作组合在一起，这些动作总是纯 js 对象，不需要异步处理？

谢谢

【问题讨论】：

只是一个旁注。自从 react 钩子和更新的状态管理库（如 zustand）出现以来，就没有使用过 redux 和 thunk。轻松多了。

一般仅供参考：您在这里编写了一种非常古老的 Redux 风格。 Modern Redux 大约只有四分之一的代码，不使用 switch..case reducers、ACTION_TYPES、createStore 或 connect。我强烈建议您查看redux.js.org/tutorials/essentials/part-1-overview-concepts 的官方 Redux 教程，并首先了解现代 Redux。该教程还将介绍诸如 thunk 之类的内容。

@SILENT 天哪，我刚刚用 Zusand 替换了 redux。它非常直截了当，到目前为止我都喜欢它。感谢您的建议

【参考方案1】：

对我来说很好用。

import  applyMiddleware, combineReducers, createStore  from 'redux';
import thunk from 'redux-thunk';
import  composeWithDevTools  from 'redux-devtools-extension';

const actionTypes =  REGISTER_NEW_USER: 'REGISTER_NEW_USER' ;
const INITIAL_STATE = 
  user: null,
;

export const authReducer = (state = INITIAL_STATE, action) => 
  switch (action.type) 
    case actionTypes.REGISTER_NEW_USER:
      const newUser = action.payload;
      return 
        ...state,
        user: newUser,
      ;
    default:
      return state;
  
;

const rootReducer = combineReducers( auth: authReducer );
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

const registerUser = () => 
  console.log('HERE');
  return async (dispatch) => 
    try 
      console.log('here in thunk');
      const newUserData =  email: '[e-mail]', token: '234jk23hjkhaSDASD' ;
      dispatch( type: actionTypes.REGISTER_NEW_USER, payload: newUserData );
     catch (e) 
      console.log(e);
    
  ;
;

store.subscribe(() => 
  console.log('state:', store.getState());
);
store.dispatch(registerUser());

执行结果：

HERE
here in thunk
state: 
  auth:  user:  email: '[e-mail]', token: '234jk23hjkhaSDASD'  

文档Writing Logic with Thunks 很清楚：

特别是对于 Redux，“thunk”是一种编写函数的模式，其内部具有逻辑，可以与 Redux 存储的 dispatch 和 getState 方法进行交互。

Thunk 是在 Redux 应用程序中编写异步逻辑的标准方法，通常用于数据获取。但是，它们可以用于各种任务，并且可以包含同步和异步逻辑。

你是对的，可以将 thunk 和动作组合在一起，它们总是纯 js 对象。普通的 js 对象动作通常用于 UI 动作。

但更好的方法是使用action creators 创建Flux Standard Actions