首页 > 解决方案 > Redux 状态已更新但组件未重新渲染(使用 promise 时)

问题描述

我正在使用 React/Redux。主要问题是,当我使用 Promise 时,不会重新渲染组件,而在不使用 Promise 代码时代码工作正常。

动作创建者

    const updateColor = colorobj => {
      return dispatch => 
      new Promise(function(resolve, reject) {
        dispatch(fetchColorBegin());
        axios
          .post(config.APIURL.color.update, colorobj)
          .then(response => {
            const data = response.data;
            if (data.errorno !== 0) {
              dispatch(fetchColorFailure(data.errormsg));
              reject(data.errormsg);
            } else {
              dispatch(updateColorSuccess(colorobj));
              resolve('Color Updated');
            }
          })
          .catch(error => {
            dispatch(fetchColorFailure(error.message));
            reject(error.message);
          });
      });
    };

减速器

 case UPDATE_COLOR_SUCCESS:
      const todoIndex = state.data.findIndex(todo => todo.id === action.payload.id);
      return update(state, {
        loading: { $set: false },
        data: { [todoIndex]: { $merge: action.payload } },
        error: { $set: null}
      });

组件 状态已更新但组件未更新。

const handleEditOk = values => {
    let colorobj = {
      id: state.updateData.id,
      colorname: values.colorname,
      colorcode: values.colorcode,
    };
    dispatch(updateColor(colorobj))
      .then(response => {
        message.success(response);
        onCancel();
      })
      .catch(error => {
        message.error(error);
      });
  };

组件仅在注释承诺代码时更新自身。现在的问题是它没有显示成功/失败消息。

  const handleEditOk = values => {
    let colorobj = {
      id: state.updateData.id,
      colorname: values.colorname,
      colorcode: values.colorcode,
    };
    dispatch(updateColor(colorobj))
      // .then(response => {
      //   message.success(response);
      //   onCancel();
      // })
      // .catch(error => {
      //   message.error(error);
      // });
  };

请建议。

标签: reactjsreduxpromise

解决方案


推荐阅读