0

我是反应 redux 的新手。我正在尝试使用 react 和 redux 创建一个基于 watson 的聊天机器人。我链接到 watson api 的 nodejs 后端工作正常。但是，我对如何在前端处理用户和机器人消息感到有些困惑？

在组件确实安装时，我将操作发送到我的后端，然后我从 Watson 获得响应并相应地更新状态。第一次，我只向后端发送一个空字符串。当用户按下带有他的消息的发送消息按钮时。动作再次被触发。我正在使用 redux thunk 进行异步操作。然后，当我从后端收到响应时，我使用“SEND_USER_MSG_TO_SOE”类型和有效负载发送了该操作。现在我必须将存储在状态 + 新输入文本中的先前响应发送到后端以获得新响应。

在我的减速器中，我正在做这样的事情 [...state, action.payload]。现在它也覆盖了先前响应的输入值。你能解释一下吗？

我需要数组中的输入和输出消息。这样我就可以使用地图并将其显示为列表。

另一件事，如果我不返回 [...state, action.payload] 并且只发送有效负载。然后我只得到一个回应就离开了。如何使用先前的响应输入和输出从中创建数组？

我附上回复图片。请指导我

Watson 后端响应图像

谢谢见面

reducer: 
export default (state = [], action) => {
  console.log('reducer payload ---> ', action.payload);

  switch(action.type) {
    case 'SEND_USER_MSG_TO_SOE':
      return [...state, action.payload]
    default:
      return state;
  }
}

export default combineReducers({
  watsonResponse: converReducer
})


action:
export const sendMessage = (userInput) => {
  return async (dispatch, getState) => {
    let response = null;
    if (userInput === undefined) {
      response = await axios.post('http://localhost:8014/message_in', userInput);
    } else {
      let newInput = [...getState().watsonResponse];
      newInput[newInput.length - 1].input.text = userInput;
      response = await axios.post('http://localhost:8014/message_in', newInput[newInput.length - 1]);
    }
    dispatch({
      type: "SEND_USER_MSG_TO_SOE",
      payload: response.data
    });
  }
}
4

1 回答 1

0

这条线是个问题

newInput[newInput.length - 1].input.text = userInput;

您正在使用用户输入覆盖数组中的最后一个条目。您可能需要push在数组中添加一个新项目。

于 2019-04-22T13:12:57.107 回答