Redux기초: 차근차근 작성하기🐣

Action, Dispatch, Reducer 헷갈릴 때 읽어보기

1. 액션 타입 Action Type이란?

const 타입 = ‘액션타입’

접두사(reducer)를 붙여주는 이유?
=> 서로 다른 리듀서에서 액션이름이 중첩되는 것을 방지합니다.

• 변수명은 액션 생성 함수의 return에서 type을 지정할 때 사용합니다.
• 값은 리듀서 내부에서 case를 나눌 때 사용합니다.
  

const UPDATE = "list/UPDATE"

---

2. 액션 생성 함수

• 액션 생성함수는 파일 바깥에서 import해서 사용하기 때문에 export합니다.
• 파일 바깥에서 받아온 인자를 type과 함께 reducer에 전달합니다.
  

export function 액션생성함수(값){
return { type: 타입, 값 }
}

export function updateList(list_index){
	return {type: UPDATE, list_index}
}

• 액션을 일으키려면 액션 생성 함수와 dispacth를 각각 import합니다.
  

import {액션생성함수} from ‘경로’
import dispatch from ‘react-redux’

import {액션생성함수} from ‘경로’
import dispatch from 'react-redux'
...
dispatch(updateList('사용할 값'))

---

3. 리듀서 Reducer

• 리듀서는 default로 export합니다. 내부에서 action의 type을 사용해 switch문을 실행합니다.
• 모듈 state에 새로 덮어쓸 값을 return해줍니다.

export default function reducer(state = initialList, action ={}){
  switch (action.type){
    default: {
      return state;
    }
  }
}

• reducer의 매개변수 인자
• reducer(state = 초기값, action ={})
  

Reducer	담고 있는 내용	담고 있는 값
1. State	현재 가지고 있는 값	[{…}, {…}, {…}]
2. Action	액션에 넣어 주고 있는 값, 액션 type	type: “list/UPDATE”, list_index: “0”

• 리듀서 Reducer는 실제로 값이 바뀌는 곳입니다.
  

case ‘액션타입’ : {
return {키: 업데이트할 값}
}

export default function reducer(state = initialList, action = {}) {
  switch (action.type) {
    case "list/UPDATE" : {
      console.log('check')
      return state;
    }
    default: {
      return state;
    }
  }
}

---

4. 디스패치 dispatch

• 액션을 디스패치해서 액션 생성 함수를 실행시킵니다.
  (디스패치 하지 않으면 아무일도 일어나지 않음)

  dispatch(액션생성함수(보낼 값))

	onclick={()=>{ dispatch(updateList(list_index)) }}

---

5. reducer case 작성예시

case "list/UPDATE" : {
  const new_list = state.list.map((l, idx)=>{
    if(parseInt(action.list_index) === idx){
      return {...l, completed: true;} // completed만 true로 변경
    }
  })
  return {list: new_list} // 변경한 배열을 return
}