React Native+Redux中通过API添加员工后如何更新Store状态？

嘿，作为React Native和Redux新手，遇到这种CRUD状态同步的问题太正常了，我来一步步帮你搞定！

首先，我们有两种常见的解决方案，取决于你的Create Employee API返回的数据：

方案1：如果API返回新增员工的完整数据 #

如果你的createEmployees API在成功时，除了transaction_id还返回了新员工的完整信息（比如包含user、nickname等字段的对象），那我们可以直接在action里把这个新员工添加到现有的business状态中，不用重新请求整个business数据，这样更高效。

步骤1：修改Create Employee Action #

更新你的createNewEmployee action，在then里获取新员工数据，然后dispatch一个专门的action来更新business里的员工列表：

export const createNewEmployee = (businessName, data) => {
  return (dispatch) => {
    dispatch(createEmployee(businessName, data))
    createEmployees(businessName, data)
    .then(response=>{
      // 假设API返回的response.data里包含新员工的完整对象：newEmployee
      const newEmployee = response.data.newEmployee;
      // 先dispatch成功action
      dispatch(createEmployeeSuccess(response.data.transaction_id));
      // 再dispatch更新business员工的action
      dispatch(addEmployeeToBusiness(newEmployee));
    })
    .catch(err => {
      console.log("errEmp",err)
      dispatch(createEmployeeFailure(err))
    })
  }
}

// 新增一个action creator用来添加员工到business
export const addEmployeeToBusiness = (newEmployee) => {
  return {
    type: 'ADD_EMPLOYEE_TO_BUSINESS',
    payload: newEmployee
  }
}

步骤2：在Business Reducer中处理这个Action #

找到你的business reducer，添加对应的case来更新employees数组：

const initialState = {
  business: [],
  // 其他状态...
};

const businessReducer = (state = initialState, action) => {
  switch(action.type) {
    // 其他已有的case...
    case 'ADD_EMPLOYEE_TO_BUSINESS':
      return {
        ...state,
        // 假设你的business是数组（存储多个业务），通过id匹配目标业务
        business: state.business.map(biz => {
          // 这里可以根据实际情况用id或businessName匹配
          if(biz.id === action.payload.businessId) {
            return {
              ...biz,
              employees: [...biz.employees, action.payload]
            }
          }
          return biz;
        })
        // 如果你的business是单个对象（更符合你通过aliases获取单条数据的场景），则改为：
        // business: {
        //   ...state.business,
        //   employees: [...state.business.employees, action.payload]
        // }
      }
    default:
      return state;
  }
}

方案2：如果API只返回transaction_id（你的当前情况） #

如果你的API只返回transaction_id，没有新员工的完整数据，那最稳妥的方式是在创建成功后，重新调用getBusinessByAliases来拉取最新的business数据，这样store里的状态就会自动同步。

修改Create Employee Action #

在createEmployeeSuccess之后，dispatch你的getBusinessByAliases action即可：

export const createNewEmployee = (businessName, data, aliases) => { // 新增aliases参数，用来重新获取对应业务
  return (dispatch) => {
    dispatch(createEmployee(businessName, data))
    createEmployees(businessName, data)
    .then(response=>{
      dispatch(createEmployeeSuccess(response.data.transaction_id));
      // 重新调用getBusinessByAliases刷新数据，确保store拿到最新的员工列表
      dispatch(getBusinessByAliases(aliases));
    })
    .catch(err => {
      console.log("errEmp",err)
      dispatch(createEmployeeFailure(err))
    })
  }
}

这样，当重新获取business数据后，你的reducer会用最新的接口数据覆盖原状态，新增的员工就会自动出现在business的employees数组里了。

小提示 #

• 如果你用的是单个business对象（而非数组），记得调整reducer里的更新逻辑，避免不必要的数组map操作。
• 确保后端在创建员工后，已经把新数据写入数据库，这样重新拉取的business数据才会包含新增员工。
• 可以给新增操作加上loading状态，避免用户重复点击，提升交互体验。

内容的提问来源于stack exchange，提问作者rasika