意外的 redux 动作分派行为

Question

所以我有一个从 api 获取的调度，然后它将根据请求的响应代码调度成功或错误操作。成功时，我的操作应该添加到我的 redux 存储中的数组中，错误时它应该什么都不做并返回当前状态。然而，由于某种原因，当获取请求中出现错误时，错误操作确实被调用（我已经使用 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()
    }
  }

Answer 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 ) {

我认为，这就是你的项目出现奇怪情况的原因，其他代码片段看起来不错。

希望这有助于您理解，如果您有任何问题，请在下面添加评论。