意外的 redux 操作调度行为答案

【问题标题】：Unexpected redux action dispatch behaviour意外的 redux 操作调度行为
【发布时间】：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()
    }
  }

【问题讨论】：

标签： reactjs redux

【解决方案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。

【讨论】：