我最近开始研究redux thunks。我的理解是，它应该用于处理异步操作，或者需要从其他操作中调度操作。所以我的商店配置为：
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")语句，但return方法中没有任何日志。我错过了什么？
次要问题，没有前一个那么重要：现在我在使用Thunks，我所有的行为都需要是一个暴徒吗？或者，将thunk和action组合在一起，它们总是不需要异步处理的普通js对象，这样可以吗？
感谢
它对我来说很好。
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' } }
}
用Thunks编写文档的逻辑很清楚：
特别是对于Redux；暴徒"是一种编写函数的模式，其中包含可以与Redux商店的dispatch和getState方法交互的逻辑。
Thunks是在Redux应用程序中编写异步逻辑的标准方法，通常用于数据获取。但是，它们可以用于各种任务，并且可以包含同步和异步逻辑。
你是对的，有一个thunk和动作的组合总是普通的js对象是可以的。普通的js对象操作通常用于UI操作。
但更好的方法是使用动作创建者创建Flux标准动作