提问人:Zonaed Hasan 提问时间:10/8/2023 更新时间:10/8/2023 访问量:34
React Redux - 为什么要使用嵌套函数?[复制]
React Redux - Why should I use nested functions? [duplicate]
问:
我正在编写 React Redux 教程。itemActions.js有下面的代码。为什么要使用嵌套函数?我可以将 item 和 dispatch 作为一个函数的参数传递。itemActions.js 和 My thinking 的原始代码在底部。请详细解释。提前致谢。
export const addItem = (item) => (dispatch) => {
axios.post('/api/items', item)
.then(res => {
dispatch({
type: ADD_ITEM,
payload: res.data
});
})
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
});
}
export const addItem = (item, dispatch) => {
axios.post('/api/items', item)
.then(res => {
dispatch({
type: ADD_ITEM,
payload: res.data
});
})
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
});
}
答:
你的教程已经过时了。现代 Redux 不使用ACTION_TYPES,thunk(如示例中所示)通常不再以这种形式编写,您可能不需要公理,现在很少需要可符号。 请阅读官方的 Redux 教程。
(您可能会看到更多的差异,例如 reducers 没有被编写为函数等,但这不在您的代码示例中 - 但您本质上是在编写 2019 年之前的 Redux)switch..case
对于您的问题:您案例中的高阶函数是创建“thunk”的函数,这是函数形式的可调度 Redux 操作的特例。因此,它更像是一个“动作创建者函数”,而不是一个“双参数函数”。
通过调用来使用 thunk,然后 Redux 本身将执行生成的 thunk。 因为符号在 Redux 中没有被建立为一种模式,你最终会得到一个其他人无法轻松摸索的代码库。dispatch(addItem(item))
addItem(item, dispatch)
此外,一个 thunk 可以读取商店内容,因为 thunk 的完整签名是 - 如果你要按照你的风格来写,你最终会调用,而不是只是做,让 Redux 做剩下的事情。(dispatch, getState, extraArgument) => { /* do something */ }
addItem(item, dispatch, getState, extra)
dispatch(addItem(item))
评论