- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 createSlice
生成的 redux-thunk reducer 来自名为 getOne
的 redux-toolkit .getOne
从 API 获取并调度加载状态的操作,( startedLoading
, finishedLoading
, errorLoading
)。
我还想调用在同一切片中创建的另一个 actionCreater,名为 insert
与结果数据。或直接从 getOne
更新状态 reducer 。
import { createSlice } from "@reduxjs/toolkit"
import { startedLoading, finishedLoading, errorLoading } from '../slices/loadingSlice'
const apiEndpoint = "/api/v1"
const fetchOptions = { headers: { "Content-Type": "application/json" } }
const createModelSlice = function (modelName) {
return createSlice({
name: modelName,
initialState: {byId: {}},
reducers: {
insert: (state, action) => {
// ...
},
getOne: (state, action) => async (dispatch) => {
// ...
try {
const response = await fetch(/* */)
// How would I update the store here?
// 1. reference the insert actionCreater somehow.
dispatch(insert({id: id, data: response))
// 2. construct the action manually
dispatch({action: `${modelName}/insert`, payload: {id: id, data: response))
// 3. Mutate the state here and rely immer. (I'm not sure exactly how that works)
state[modelName].byId[id] = response
dispatch(finishedLoading({ key: /* */ }))
} catch (error) {
dispatch(errorLoading({ key: /* */ }))
}
},
// ...
}
})
}
最佳答案
我错过了有关切片无法使用 thunk 的部分文档。无论哪种方式,它都不起作用,因为 thunk Action 不会映射到 reducer ,而是将其他 Action 分派(dispatch)到多个其他 reducer / Action 。
创建切片后,我向切片操作添加了 thunk 操作。这样我可以引用其他 Action
import { createSlice } from "@reduxjs/toolkit"
const slice = createSlice({
name: name,
initialState: { byId: {} },
reducers: { /* */ }
}
slice.actions.myThunkAction = payload => async (dispatch, state) => {
// ...
slice.actions.nonThunkAction({ id: id, data: data})
slice.actions.anotherNonThunkAction({ index payload.index, data: data.map( /* */ )})
}
import { createSlice } from "@reduxjs/toolkit"
import { startedLoading, finishedLoading, errorLoading } from '../slices/loadingSlice'
import encodeURLParams from '../tools/encodeURLParams'
const apiEndpoint = "/api/v1"
const fetchOptions = { headers: { "Content-Type": "application/json" } }
const createModelSlice = function (modelName) {
const slice = createSlice({
name: modelName,
initialState: { byId: {} },
reducers: {
insert: (state, action) => {
// ...
},
bulkInsert: (state, action) => {
// ...
},
}
})
slice.actions.loadMany = payload => async (dispatch, state) => {
dispatch(startedLoading({ key: /* */ }))
try {
const response = await fetch(/* */)
dispatch(slice.actions.insert(response))
dispatch(finishedLoading({ key: /* */ }))
} catch (error) {
dispatch(errorLoading({ key: /* */ }))
}
}
slice.actions.loadOne = payload => async (dispatch, state) => {
dispatch(startedLoading({ key: /* */ }))
try {
const response = await fetch(/* */)
dispatch(slice.actions.bulkInsert(response))
dispatch(finishedLoading({ key: /* */ }))
} catch (error) {
dispatch(errorLoading({ key: /* */ }))
}
}
return slice
}
export default createModelSlice
关于redux-toolkit 在来自另一个 thunk reducer 的同一切片中使用 actionCreater,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59448133/
谁能给我解释一下 Thunk 是什么? 还有一个 ATL Thunk? 我知道 thunk 与 vtbl 和执行代码有关,以找到正确的函数指针。我说得对吗? 最佳答案 它是一段从根本上改变执行环境的适
我创建了这个小程序,它创建了一个长时间运行的 thunk,最终因异常而失败。然后,多个线程尝试对其进行评估。 import Control.Monad import Control.Concurren
我正在尝试输入检查我的 redux-thunk使用 Typescript 编写代码。 来自 Redux 的官方文档:Usage with Redux Thunk ,我们得到这个例子: // src/t
我正在尝试围绕“async/await”思考,async 函数总是返回 Promises 并将异步函数与 Redux Thunks 结合使用这一事实 -- 我知道 async 函数根据定义总是返回一个
这个问题与过去不同,这就是为什么。这个问题是什么时候。由于两者本身都是很好的框架,所以问题是我什么时候应该使用 thunk 而不是 saga。因为我的一位 friend 一直坚持让我在我们的应用程序中
我正在更新我的项目中的依赖项(redux 4.0.1、redux-thunk 2.3.0、typescript 3.1.3),我很难在我的两个项目中找到 redux-thunk 的正确类型 Actio
这个问题在这里已经有了答案: Create grouping variable for consecutive sequences and split vector (5 个答案) 关闭 9 个月前
我有以下两个 Redux 操作(thunk) export const getA = () => async (dispatch, getState) => { const response =
我正在尝试编写在 makeThunk 函数内部编写的代码,但在这里我无法理解如何在内部传递 cb 的值makethunk 函数。 我想在使用回调调用 thunk 后记录总和值! 我的代码看起来像这样:
假设我有大量(数百万/数十亿+)这些简单的 Foo 数据结构: data Foo = Foo { a :: {-# UNPACK #-}!Int , b :: Int } 由于
这个问题是关于虚函数调用的(可能的)实现(我相信它被 gcc 使用)。 考虑以下场景: F 类继承自 D 类(可能还有其他类),而 D 类继承自 B 类(并非虚拟)。 D重写了B中声明的虚方法f();
我想定义一个重载方法,一个接受 function0,一个接受 function1,即: def produces(f: Context => Any): Processor = ... def pro
我有一个应用程序可以在渲染时获取一些用户信息。因此,当应用程序首次启动时,它会使用 getUserInformation() 函数获取数据。用户无需手动登录,应用在公司内网。 export funct
我以为我知道什么是闭包,但我不太确定是否阅读了一些有关 React 的文章。 下面的函数是“thunk”吗?(对我来说这是一个闭包,我从一篇关于 React https://spin.atomicob
我已经看到它用于编程(特别是在 C++ 领域),但不知道它是什么。大概这是一种设计模式,但我可能是错的。谁能举一个thunk的好例子吗? 最佳答案 thunk通常指一小段代码,作为函数调用,做一些小事
我有以下操作 export function getAllBooks() { return function(dispatch) { return axios.get('http://l
什么是与 EXE 文件中用于导入外部 DLL 中使用的函数的导入地址表相关的 thunk 表? 这个 thunk 表只是一个包含“Thunk”到其他函数的表吗? 最佳答案 Thunks 是 导入表的一
我不明白为什么 Action 创建者被调用但卡在中间的某个地方。我的组件 import React, { Component } from 'react'; import { connect } fr
问题: 我使用redux-thunk我想收到帖子。要接收帖子,我需要获得用户。所以我对我的thunk有疑问,在一个thunk中获取所有数据是否正确,如果不是如何将其拆分为两个thunk? Thunk
我有一个改编自 Redux 文档的基本 thunk Action 创建器和 reducer :http://redux.js.org/docs/advanced/AsyncActions.html /
我是一名优秀的程序员,十分优秀!