意外的 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 操作

调度操作后 Redux 状态未更新

来自根组件的 React/Redux 调度操作?

在 redux 中在哪里调度多个操作?

使用 typescript 将异步操作发送到 redux 调度

Redux 中间件未调度新操作