axios와 store

[김동일]

데이터를 보관하는 store.js라는 곳을 따로 만들어 두고 토이 프로젝트를 하고 있습니다

axios로 값을 불러올 때 처음에 store.js라는 곳에 불러와서 관리해주려고 하는데

이 axios 처리를 어떻게 해야할지 모르겠습니다..

axios.get(URL)로 불러오려면 async & await을 쓰려고하는데 이렇게 된다면 불러온 값이 함수 스코프에 갇혀서  밖에서 사용을 못하고 있습니다.. 

어떻게 해야할까요?

[codingapple]

1. 컴포넌트안의 useEffect에서 ajax 요청하고

2. 데이터를 가져기 성공하면 store에 저장하라고 dispatch 날리는 식으로 개발하면 됩니다  

[김동일]

게시글로 예를 들어

컴포넌트 안의 useEffect안에서 ajax 요청한 뒤 데이터를 store에 저장하라고 dispatch날린다고 했을 때,

게시글 작성이나 수정 삭제를 type지정해두고 다시 dispatch 날리면

store에서 맨 처음에 저장되어있던 데이터 값을 가지고 수정, 삭제, 작성을 실행하면 되는건가요??

저는 실습하실 때 index.js에서 값을 모두 위에서 초기화 해주신 뒤

reducer 함수에서 state=(위에 초기한 값) 이렇게 해주시길래 약간 혼동이 와서요..

store에 저장은 어떻게 하면될까요??

dispatch로 날리는건 가능하겠는데..

ex ) 다른 컴포넌트.js에서 store.js로 보내준 데이터를 store.js에서 어떻게 데이터 저장할지 감이 안잡혀서요

[codingapple]

var 초기값은 처음에 비워놓고

ajax 요청 완료되면 거기 데이터 저장하고 계속 사용하면 됩니다 

[김동일]

음.. List.js에서 ajax 요청완료되어 데이터 받아온 값을 dispatch로 store.js로 보냈고,

store.js에 있는 commentReducer라는 reducer함수에서 첫번째 인자를 state = [], 두번째 인자를 action 이라 지정해두고

action type에 따른 if, else if 조건문 들어가기전에 let [jsonData, setJsonData] = useState (); 이렇게 지정해 둔다음...

위에 dispatch로 json데이터 받은 데이터 타입을 조건을 걸어 setJsonData(action.jsonData) 이렇게 해줬는데 밑에와 같은 에러가 떳습니다..

store에 데이터 저장해두라는게 그냥 변수로 바로 저장하라는 말씀이셨을까요??

useState는 사용이 안되네요..ㅠㅠ

React Hook "useState" is called in function "commentReducer" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter 

[김동일]

변수에 선언해서 axios로 받은 데이터를 dispatch로 store에 저장해놓고 조회하는데 까지는 성공했는데

댓글 추가하려고하면 어떻게 해야하나요...??

아래와 같이 정의는 했는데.. type이  add일 때는 저장한 값을 어떻게 불러와야 하나요...?

블록 스코프 때문에 가져오지를 못하는 것같은데 

add할 때도 dispatch로 데이터를 보내야 하는건가요??

const commentReducer = (state = [], action) => {
  var commentData = null
  if (action.type === "dataLoading") {
    var commentData = action.jsonData
    return commentData
  }else if (action.type === "add"){
    console.log(commentData)
    const copyCommentList = [commentData, action.inputComment]
    return copyCommentList
  }else{
    return state
  }
}

[codingapple]

useState는 컴포넌트안에서만 사용가능합니다

리듀서안의 state 라는 파라미터가 현재 state입니다 

[김동일]

아 그러면.. dispatch된 값을 state에 저장한다는게 리덕스에 값을 저장한다는 의미네요!!

맞을까요!?

[codingapple]

넴

[김동일]

마지막으루 질문 하나만 더 해도 괜찮을까요 ㅜㅜ

리액트를 처음 접하다보니 궁금증이 많습니다!!

아래와 같이 코드를 짰는데

액션 타입이 add일 때를 보면

copyCommentList에 state를 deepcopy해서 변경된 값을 return해 줬는데

마치 리덕스에 저장된 값에 적용되는 것처럼 보였습니다

return된 copyCommentList가 state(기존reducer에 저장된 값)가 된다고 생각하였는데

이게 맞을까요??

const commentReducer = (state = [], action) => {
  if (action.type === "dataLoading") {
    state = action.jsonData
    return state
  }else if (action.type === "add"){
    const copyCommentList = [...state, action.inputComment]
    return copyCommentList
  }
  else if (action.type === "delete"){
    let copyCommentList = [...state]
    copyCommentList.splice(action.i, 1)
    return copyCommentList
  }
  else{
    return state
  }
}

[글쓴이]

글