# redux-actions

kimtheman9571

📌 Redux Thunk 란? 🔎 thunk란? thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼것을 칭합니다. 🔎 redux - thunk란? 리덕스는 기본적으로 액션 객체를 디스패치합니다. 일반 액션 생성자는 파라미터를 가지고 액션 객체를 생성하는 작업만 합니다. 따라서 특정 액션이 몇초뒤에 실행되게 하거나, 현재 상태에 따라 액션을 무시하려면 일반 액션 생성자로는 할 수 없습니다. 리덕스 썽크란 대표적인 비동기 작업 처리를 위한 미들웨어로, 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와주어야 합니다. 이 함수를 만들어주는 함수를 thunk 라고 합니다.

belisy

redux-saga 제너레이터 객체를 만들어내는 제너레이터 생성함수를 이용 리덕스 사가 미들웨어를 설정하고, 내가만든 사가 함수를 등록한 후, 사가 미들웨어를 실행. 그 후, 등록된 사가 함수를 실행할 액션을 디스패치하면 된다. npm i redux-saga 또는 npm i next-redux-saga redux-saga의 주요 effect delay: 설정된 시간 이후에 resolve하는 Promise객체를 리턴 ex) delay(1000) put: 특정 액션을 dispatch하도록 한다 ex) put({type: 'INCREMENT'}) takeEvery: 들어오는 모든 액션에 대해 특정 작업을 처리해준다 (비동기적으로 동작, 동기적으로 동작시키려면 while(true) {yield take()} 를 사용하면 됨(yield는 일회용이라서 계속 사용하기 위해서 while(true)라는 조건문 안에 넣어주기)

katej927

📌 redux-actions 🔹 효과 더 짧게 작성 → 가독성 ⬆, 객체 직접 작성x 🔹 사용법 🔸 액션 생성 함수 createAction 사용 (액션에 필요한) 추가 데이터 : payload 형태 기본형 예시 예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면 creatAction 2번째 함수에 따로 선언 예시 2. 생략 가능한 파라미터 파라미터를 그대로 반환하는 함수 (ex. id ⇒ id ) 생략 가능 (필수x) 효과: 필요한 파라미터 값 파악 쉬워짐 🔸 리듀서 >handleActions 사용 기본형 예시 1번째 파라미터: 각 액션에 대한 업데이트 함수 2번째 파라미터: 초기 상태 추가 데이터 조회: action.payload 값을 조회 **객체 비구조화 할당

bandor

redux-actions > action creator와 reducer를 편리하게 선언하고 코딩할 수 있게 돕는 라이브러리. 기존 action creator는 return 해야할 객체를 일일이 코딩했다. action의 수만큼 만들어야할 객체가 늘어났는데, redux-actions의 createAction() 과 createActions() 를 사용하면 간단하게 작성할 수 있다. 기존 reducer는 action.type을 switch-case 문으로 구분해, 작업을 처리했다. reducer는 다음과 같이 코딩할 수 있다. 기존 reducer에선 action으로부터 받아온 data를 action.blahblah 로 받아왔었지만, handleAction()을 사용하면 action.payload.blahblah 형식으로 받아올 수 있다. handleActions() 의 2번째 인자는 initialState 값이다. `handleActions()

kim6515516

redux-actions을 사용하면 액션 생성 함수와 리듀서를 더 짧은 코드로 작성 할수 있다. redux-actions 미 적용 redux-actions 로 바꾼 코드 yarn add redux-actions

sangminnn

무지하게도 handleActions를 사용한 reducer에 [Action-name]: (state, action) ⇒ 하고서 {} 로 감싸버려서 draft 적용값이 안들어갔음 .. ㅠㅠ 이 문제 때문에 전체 프로젝트 구조가 머릿속에서 자연스럽게 돌아갈때까지 코드를 보다보니 시간을 너무 많이 써버렸다 ... {} 로 감싸고싶다면 produce를 return 해줘야함 useSelector자체는 해당 redux state가 변한다면 알아서 re-rendering 해준다. 이 문제에 대해서 saga를 구현하는 동작에 대해 전체적인 구조를 많이 생각하고, 다른 개발자 분들은 어떻게 해결하시는지에 대해 github을 헤엄치고 그에 대한 동작을 내 project에 custom하여 이식하다보니 일부분을 해결하는 과정에서도 시간이 꽤 지났다. 그래도 올바른 방법을 찾고 정의해둬서 다른 component에 확장하는건 금방 할수 있을것같다. initializeForm 동작에 대해서 어떤 느낌