Redux thunk 函数未执行

Question

我最近开始研究 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': 'asdas@gmail.com',
                '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 对象，不需要异步处理？

谢谢

Answer 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: 'asdas@gmail.com', 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: 'asdas@gmail.com', token: '234jk23hjkhaSDASD' } }
}

文档Writing Logic with Thunks 很清楚：

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

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

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

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