redux store에 값 저장 및 다른컴포넌트에서 쓰기

ex) commute

1. store - state(상태 값)을 총괄하는 부분이다. 컴포넌트들은 이 스토어에 액션을 dispatch하고 

subscribe하며 상태를 반영할 수 있다.

2. action - 스토어에 대한 값을 변경하기 위해 신호를 주는것

ex) 이벤트가 발생했다 값을변화시켜주라

action은 객체이다. type를 가진다.

3. reducers 액션을 받아서 스토어의 값을 처리하는 작업을 함.

스토어는 저장소 역할만 할 뿐 아무것도 하지않음. 리듀서가 스토어의 값을 변화시킴

import {createAction, handleActions} from 'redux-actions';
import {Map} from 'immutable';
import {pender} from 'redux-pender';
import * as api from '../../lib/api'; 
const GO_TO = 'commute/GO_TO';//action들 url 지정 - 스토어 부분
const GO_OFF = 'commute/GO_OFF';
const STATE_CHANGE = 'commute/STATE_CHANGE';
const GET_END_TIME = 'commute/GET_END_TIME';
export const goTo = createAction(GO_TO, api.goTo);//action들 export 뒤의 값은 lib의 api이다. ?액션생성자?
export const goOff = createAction(GO_OFF, api.goOff);
export const stateChange = createAction(STATE_CHANGE);
export const getEndTime = createAction(GET_END_TIME, api.getEndTime);
const initialState = Map({//초기값설정
    goto: false,
    gooff: false,
    gotoDisabled: false,
    gotoVariant: "primary",
    offDisabled: true,
    offVariant: "secondary",
    isGoOff: false,
    endTime: '',
    gotoselect : '',
    gotosettime : ''
});
// 아래로 - 리듀서 부분
// 
//
export default handleActions({
    [STATE_CHANGE]: (state, action) => { 
        const {name, value} = action.payload;
        console.log("STATE_CHANGE : " + name + " " + value);
        return state.set(name, value);
    },
    ...pender({
        type: GO_TO,
        onSuccess: (state, action) => {
            console.log("GO_TO : " + action.payload);
            const{gotoselect , gotosettime} = action.payload.data;
            console.log("####"+ gotoselect + "###" + gotosettime);
            if(action.payload.data.data == false){
                alert("이미 출근하셨습니다.");
            }
            else {
                localStorage.setItem('goto', true);
                localStorage.setItem('gooff', false);
                return state.set('gotoDisabled', true)
                    .set('gotoVariant', 'secondary')
                    .set('offDisabled', false)
                    .set('offVariant', 'primary')
                    .set('gotoselect',gotoselect)
                    .set('gotosettime',gotosettime);
            }console.log("####"+ gotoselect + "###" + gotosettime);
            return state.set('goto', true)
                        .set('gooff', false);
        }
    }),
    ...pender({
        type: GO_OFF,
        onSuccess: (state, action) => {
            console.log("GO_OFF : " + action.payload);
            if(action.payload.data.data == false) {
                alert("이미 퇴근하셨습니다.");
            }
            else {
                 localStorage.removeItem('goto');
                 localStorage.removeItem('gooff');
                //localStorage.clear();
                return  state.set('gotoDisabled', false)
                    .set('gotoVariant', 'primary')
                    .set('offDisabled', true)
                    .set('offVariant', 'secondary');
            }
            return state.set('gooff', true)
                .set('goto', false);
        }
    }),
    ...pender({
        type: GET_END_TIME,
        onSuccess: (state, action) => {
            console.log(action.payload);
            return state.set('endTime', action.payload.data.data);
        }
    })
}, initialState);
 

동기 비동기

상대방의 신호에 의해서 다음동작이 이루어지면 동기

상관없이 지맘대로 동작하면 비동기

받을준비가 되었을때 보내는게 동기

software에서는 루틴을 끝내고 제어를 반납하면 동기

제어를 반납하고 자신의 할일 계속하면 비동기