23. Redux

컴포넌트에서 변화가 일어났을때 store에 바로 전달되는것이 아닌
action, reducer 를 통해서 값을 관리 함.

1. component에서 dispatch를 통해 action 호출
2. action에 정의된 내용이 reducer에 의해 핸들링됨
3. 핸들링에 따라 상태값이 업데이트 됨

const redux = require('redux'); // redux라이브러리 불러옴
const createStore = redux.createStore; // createStore변수안에 createStore함수 할당


# action (오브젝트 리턴,타입리턴)
// action-types
const ADD_ITEM = 'ADD_ITEM' // action 타입 정의
const addItem = () => { // action 코드 작성
    return {
        type: ADD_ITEM
    }
}

# reducer
// state와 action 인자를 넘겨받음 action은 위에 정의한  addItem
const initialState = { // 초기값 state 설정
    item : 1 
}
const reducer = (state=initialState, action ) => { // 만약 state값에 초기값이 없으면 initialState를 받아서 사용하겠다. 
    switch(action.type) { // switch문을 통해서 핸들링함(넘겨받은 액션의 type을 통해서!)
        case ADD_ITEM:
            return {
                ...state,
                 item: state.item + 1
            }
            default: return state;
    }
}
 
# store 
const state = createStore(reducer)

store.dispatch(addItem()) // action을 호출

액션(Action): 액션은 애플리케이션에서 상태 변경을 위해 발생하는 이벤트입니다. 액션은 일반적으로 JavaScript 객체로 표현되며, 최소한의 필수 속성인 type을 가져야 합니다. type은 액션의 종류를 나타내는 문자열입니다. 예를 들어, "ADD_TODO"나 "FETCH_DATA"와 같은 값을 가질 수 있습니다. 추가적인 데이터는 payload 속성을 통해 전달될 수 있습니다.

액션 생성자(Action Creator): 액션 생성자는 액션을 생성하는 함수입니다. 이 함수는 액션의 타입과 필요한 데이터를 입력으로 받아 액션 객체를 반환합니다. 예를 들어, addTodo 액션 생성자는 새로운 할 일을 추가하기 위한 액션을 생성할 수 있습니다.

스토어(Store): 스토어는 애플리케이션의 상태를 저장하는 객체입니다. Redux에서는 한 개의 스토어가 있으며, 스토어는 상태를 관리하고 액션을 디스패치(dispatch)하는 역할을 합니다.

리듀서(Reducer): 리듀서는 이전 상태와 액션을 입력으로 받아 새로운 상태를 반환하는 순수 함수입니다. 리듀서는 애플리케이션의 상태를 변경하는 로직을 포함하며, 이전 상태를 변경하지 않고 새로운 상태를 반환해야 합니다.

디스패치(Dispatch): 디스패치는 액션을 스토어에 전달하는 메소드입니다. 디스패치를 통해 액션은 리듀서로 전달되어 상태를 변경합니다. 디스패치는 스토어의 dispatch 메소드를 호출하여 수행됩니다.

구독(Subscribe): 구독은 스토어의 상태 변화를 감지하는 메커니즘입니다. 구독을 설정하면 상태가 업데이트될 때마다 등록된 콜백 함수가 호출됩니다. 이를 통해 UI 컴포넌트가 상태 변화를 인지하고 업데이트할 수 있습니다.