[Node] Dialogflow API를 활용한 챗봇 사이트 - 4. Redux에 메세지 저장

★ 이 부분은 Chatbot과의 메세지 내용을 Redux에 저장하는 React 부분으로 필요에 의해 생략 가능합니다!

// 기존의 Chatbot.js 파일에 추가

import { useDispatch } from "react-redux";
import { saveMessage } from "../_actions/message_actions";

function Chatbot() {
  const dispatch = useDispatch();
  ...
  dispatch(saveMessage(conversation));
  ...
}

 

✏️ ./client/.../_reducers 폴더

// index.js

import { combineReducers } from 'redux';
import message from './message_reducer';

const rootReducer = combineReducers({
    message,
});

export default rootReducer;

// message_reducer.js

import { SAVE_MESSAGE } from "../_actions/types";

export default function (state = { messages: [] }, action) {
  switch (action.type) {
    case SAVE_MESSAGE:
      return {
        ...state,
        messages: state.messages.concat(action.payload),
      };
    default:
      return state;
  }
}

 

✏️ ./client/.../_actions 폴더

// types.js

export const SAVE_MESSAGE = 'save_message';

// message_actions.js

import { SAVE_MESSAGE } from "./types";

export function saveMessage(dataToSubmit) {
  return {
    type: SAVE_MESSAGE,
    payload: dataToSubmit,
  };
}

---

★ 따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기 강의를 참고합니다.