리액트 redux 개념

Action

상태에 변화가 필요하다면 액션이 발생한다 이것은 객체이다

형식:

{
	type:'TOGGLE_VALUE'
}

액션 객체는 type키를 반드시 가지고 있어야한다 값은 액션의 이름이다

 type: 'ADD_TODO',
   data:{
     id:1,
       text:'리덕스 배우기'
   }
}

{
  type: "CHANGE_INPUT',
  text: '안녕하세요'

Action 생성 함수

	function add(data){
      return {
        type: 'ADD_TODO',
        data
      }
    }

변화를 일으킬때 액션 객체를 만들어야하는데 매번 객체를 만들기힘들고 실수할수가 있어서 함수로 만들어서 관리한다

리듀서

변화를 일으키는 함수(리듀서)
액션을 만들어서 발생시키면 리듀서가 상태와 전달받은 액션객체를 파라미터로 받아온다

리듀서의 형태

 const initialState ={
   counter:1
 }
 
 function reducer(state = initialState**상태,action**액션객체){
   switch(action.type){
     case INCREMENT:
       return {
         counter: state.counter +1
       }
     default:
       return state
   }
 }

스토어(store)

프로젝트에 리덕스를 적용시키기위해 store를 만든다. 프로젝트 1개당 1개의 스토어를 가질수 있다 스토어안에는 현재 애플리케이션 상태와 리듀서가 들어있고 그외에 몇가지 내장함수가있다

디스패치(dispatch)

스토어의 내장함수중 하나이다. 디스패치는 액션을 발생시키는 것이다
형태:dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다

이함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어줍니다

구독(subscribe)

구독도 스토어의 내장함수중 하나이다
subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면
리스너 함수가 액션이 디스패치되서 상태가 업데이트될때마다 호출된다

형태:

const listener = () = >{
  console.log('상태가 업데이트됨')
}
const unsubscribe = store.subscribe(listener)
unsubscribe()// 구독을 비황성할때 함수 호출

순서 : 액션 객체가 디스패치에 전달되고 리듀서를 호출해서 새로운 스테이츠를 만든다