意外的 redux 操作调度行为
Posted
技术标签:
【中文标题】意外的 redux 操作调度行为【英文标题】:Unexpected redux action dispatch behaviour 【发布时间】:2020-09-22 20:23:35 【问题描述】:所以我有一个从 api 获取的调度,然后它将根据请求的响应代码调度成功或错误操作。成功时,我的操作应该添加到我的 redux 存储中的数组中,而出错时它应该什么都不做并返回当前状态。但是由于某种原因,当 fetch 请求中出现错误时,确实会调用错误操作(我已经使用 redux devtools 检查过)但是该操作的行为就像调用了成功操作一样,因此即使使用新值更新数组虽然有一个错误。知道可能出了什么问题吗?
谢谢
我的行动:
export const ADD_PROJECT_SUCCESS = "ADD_PROJECT_SUCCESS"
export const ADD_PROJECT_ERROR = "ADD_PROJECT_ERROR"
export function addProject( project, projects )
const url = 'project/'
let tempProjects = projects
tempProjects.push( project )
const requestOptions =
method: 'POST',
credentials: 'include',
body: JSON.stringify( project )
;
return (dispatch) =>
return fetchReq( requestOptions, url ).then( ([response] ) =>
if( response.status === 201)
dispatch( addProjectSuccess(tempProjects) )
else
dispatch( addProjectError() )
)
function addProjectSuccess( projects )
return type: ADD_PROJECT_SUCCESS, projects
function addProjectError( )
return type: ADD_PROJECT_ERROR
我的减速机:
import
ADD_PROJECT_SUCCESS,
ADD_PROJECT_ERROR,
from './projectActions'
const initialState =
projects: [],
export default function projectReducer( state = initialState, action )
switch( action.type )
case ADD_PROJECT_SUCCESS:
return Object.assign( , state, projects: action.projects )
case ADD_PROJECT_ERROR:
return state
)
default:
return state
我的调度(调度函数使用 mapdispatchtoprops 在功能组件中使用):
async function handleSubmit()
if( isValidForm() )
let project =
"name": name,
"description": description,
"category": "default",
"classification": classification,
"collaborators": collaborators
await props.addProject( project, props.projects )
props.hideForm()
【问题讨论】:
【参考方案1】:我刚刚查看了您的代码,其中包含一些问题。
let tempProjects = projects
tempProjects.push( project )
这不是一个好的解决方案。你可以这样做
const tempProjects = [...projects]
tempProjects.push(project);
之前您的代码试图访问 props 变量。看看
await props.addProject( project, props.projects )
export function addProject( project, projects )
我认为,这就是你的项目出现奇怪案例的原因,其他代码 sn-ps 看起来不错。
希望这有助于您理解,如果您有任何问题,请在下方添加 cmets。
【讨论】:
以上是关于意外的 redux 操作调度行为的主要内容,如果未能解决你的问题,请参考以下文章
redux-observable - 在单个史诗中调度多个 redux 操作