리덕스 기본개념

🔹 Actions

◾ Action

어플리케이션의 store, 즉 저장소로 data를 보내는 방법이다. view에서 정의되어있는 액션을 호출하면 action creators는 어플리케이션의 state를 변경해준다. 액션은 객체로 표현되며 type 필드를 반드시 가지고 있어야 하며, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

//action/index1.js
{	type : "ADD_TODO",
	data:{
    	id:0,
        text:"리덕스배우기"
    	}
	}

◾ Action Creator(액션 함수)

액션생성함수는 , 액션을 만드는 함수이다. 파라미터를 가져와서 액션 객체형태로 만들어준다.

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})
export const toggleTodo = id => ({
  type: 'TOGGLE_TODO',
  id
})

🔹 Reducer

변화를 일으키는 함수. State와 Action을 인자로 받아 store에 접근해 Action에 맞춰 state를 변경함.

// reducer / todos.js
const todos = (state = [], action) => {
	switch(action.type){
    	case 'ADD_TODO':
        return [
        	...state,
            {
            	id: action.id,
                text:action.text,
                completed:false
            }
        ]
        case 'TOGGLE_TODO':
        return state.map(todo => todo.id === action.id ? 
        	{...todo,completed:!todo.completed} : todo
        ) 
    }
    	default : return false
}

🔹 Store

리덕스에서 한 어플리케이션 당 하나의 store를 만들 수 있다.
스토어 안에는, 현재의 앱상태와 리듀서 추가적으로 몇가지 내장함수가 있다.

◾ Dispatch (디스패치)

스토의 내장함수 중 하나로, 액션을 발생시킨다. 액션을 파라미터로 전달한다. 그렇게 호출하면, 스토어는 리듀서 함수를 실행시켜 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

◾ Subscribe (구독)

스토어의 내장함수로, 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정함수를 전달해주면, 액션이 디스패치 되었을때마다 전달해준 함수가 호출된다.

💕 출처 및 참조 💕

• https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt
  [벨로포트 리듀서 개념]
• https://medium.com/@jsh901220/react%EC%97%90-redux-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-a8e6efd745c9
  [Redux, Flux 개념차이 ]
• https://mjn5027.tistory.com/33
  [간단한 리덕스 개념소개]
• https://ko.redux.js.org/introduction/examples
  [공홈 리덕스 예제]