eclipse react(redux)간 통신 예제 - db에서 react에 값 가져오기

통신하기전 가장 먼저 해야될 것은 로컬에서 먼저 react3000말고 서버단에서 결과가 나오면 진행.

또한 서버 켜기...

그러면 일단 백엔드 단은 다했다치고, - 저번에 정리해둔거 마무리하기

앞서 action 설정을 너무 대충해서 확실히 한번 정리하고 가자.

1. 프론트(react) 단에서 일단 내가 값을 가져올 moudle을 정하는데 나같은 경우는 Header로 들고왔다.

2. action을 쓰기 위해서는 당근빠따 src/moulde/index에서 export는 먼저해준다. 또한 api를 받아오기 위해 api관련 export를 해야 되는데 이거슨 src/lib에서 설정한다. 참고해서 형식에 맞춰 적고, 가져와야 될 값 및 보내야 할 값을 확실히 하자.

3. 대망의 moudle인 Header에서 이제보니 moudle time으로 가져왔다. 

import { createAction, handleActions } from "redux-actions";

import { Map} from "immutable";

import { pender } from "redux-pender";

import * as api from "../../lib/api";

const TIME_LIST = "time/TIME_LIST";

const TIME_RESET = "time/TIME_RESET";

export const getTimeList = createAction(TIME_LIST, api.getTime);

export const resetTime = createAction(TIME_RESET);

const initialState = Map({

data: "",

time: "",

state: "",

totalworktime:""

});

export default handleActions(

{

...pender({

type: TIME_LIST,

onSuccess: (state, action) => {

console.log(action);

console.log("@@@@@@@@@@@@@");

// const { data: time } = action.payload.data.data;

return state.set("time", action.payload.data.data.start);

}

})

},

initialState

);

위의 export 및 action 함수 선언, 설정에 대한 설명은 앞에 있고, 먼저 export default에서

통신을 하려면 pender다, 저장할때는 다르게 썻는데 참고하자. 이형식을 따라 set해준다

주의할 것은 action.payload.data.data를 확인해서 가져올 값을 확실히 가져오자

console 확인하면 보인다.

4. 그다음은 내일의 나에게 맡기자 자자이제