意外的 redux 操作调度行为

Posted 2023-03-31

【中文标题】意外的 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。