# createAction

7개의 포스트

Redux 미들웨어 2

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)라는 조건문 안에 넣어주기)

2022년 3월 25일
·
0개의 댓글
·
post-thumbnail

react-redux 의 createAction, createReducer, createSlice 사용법

createAction(링크)공식문서 세부설명 자료(링크) 좀더 자세한 다른분의 최신 설명 자료 링크(클릭) import { createAction } from '@reduxjs/toolkit'; > 기존함수 > createAction을 이용한 변경된 코드 액션 함수를 지우고 간결화 하고 > payload 를 리듀서 함수에 넣는다. 각각 text:action.text 였지만 text 를빼고 payload 변경 action.id => action.payload action 은 function 인 creacteAction 함수로 만들어진다 createReducer

2022년 3월 13일
·
0개의 댓글
·
post-thumbnail

[Redux] action, reducer, dispatch 더 간편하게 작성하기 (createAction, bindActionCreators, handleActions)

액션 생성함수를 더 간편하게 작성하기 createAction 액션 생성함수를 보다 간편하게 작성할 수 있도록 도와주는 함수이다. 기존 액션 생성 함수 액션 생성 함수는 FSA 규칙을 따른다. 필수적으로는 순수 자바스크립트 객체이며 type 값이 있어야 한다. 선택적으로 payload, error, meta 값이 있을 수 있다. payload는 액션에서 사용할 파라미터를 전달해준다. 위 예시에서 create나 changeInput은 텍스트 값을 받아와야 하기 때문에 파라미터가 되는 text를 payload값으로 지정한다. createAction 함수를 이용하면 type과 payload임을 명시해주지 않아도 된다. 첫 번째 파라미터는 type, 두 번째 파라미터는 payloadCreator로 받는다. 기존 액션생성함수 `export const changeInput = text => ({ type: CHANGE_INPUT, paylo

2021년 11월 26일
·
0개의 댓글
·

[Redux] redux toolkit - createAction

1. 개념 > Redux에서 특정 기능들을 제공하는 package Redux 코드에서 계속 반복되는 함수생성, switch 분기처리 등 이에 소요되는 반복도를 줄이고 코드를 간결하기위해 redux에서 제공하는 일종의 package(라이브러리)이다. 2-1. createAction > action 전달 시 객체를 전달하거나, 별도 함수를 통해 전달하는 구조를 단순한 action 함수 선언만을 통해 가능하게 해주는 기능 > - 함수선언과 type의 즉시 선언 위 코드를 createAction을 통해 type을 바로 선언하면서 코드를 1차적으로 간결화할 수 있다. 위 코드처럼 createAction을 통해 하나의 함수를 선언하면서 type까지 같이 선언해주고, 이를 case 문에 활용하여 코드를 간결하게 작성할 수 있다. > 모든 data들은 payload에 일괄적으로 저장 위에서 새롭게 정의한 addFunc, deleteFunc 부분만 고치면 lo

2021년 9월 1일
·
0개의 댓글
·
post-thumbnail

🎈Redux + React(with Redux Toolkit)

📃 store.js 📌 createAction + createReducer 📋 Memo Redux Toolkit을 사용하면 state를 mutate해도 된다. immer.js와 같이 작동하기 때문이다. createReducer을 할 때에는 2가지 옵션이 있다. 새로운 state를 return할 수 있다 => [{ text: action.payload, id: Date.now() }, ...state] state 자체를 mutate할 수 있다. => state.push({ text: action.payload, id: Date.now() }) 하지만 내부적으로 1번과 같은 작업이 이루어지고 있다. 📌 createSlice 📋 Memo createSlice()는 internally createAction, createReducer을 사용한다. reducers: {}

2021년 2월 25일
·
0개의 댓글
·
post-thumbnail

createAction

Redux toolkits는 redux에서 공식적으로 지원하는 redux 개발 도구이다. 리덕스 설정의 복잡성 리덕스를 사용하기 위해 설치하는 패키지의 양 작업 하나를 만들기 위해 필요한 보일러 플레이트가 너무 많은 문제 이와 같은 문제점들을 해결하기 위해서 사용한다. 기존 redux와 toolkit을 적용한 소스를 보며 비교하는 식의 글 createAction redux redux toolkit createAction 이라는 function으로 대체를 하였다. 함수 내에 지정한 string이 자동으로 type으로 지정이 된다. 기존에 return 할 값에서 action.text 에서 action.payload로 바뀐 건 createAction 은 type과 payload로 제공을 하기에 바뀌었다.

2020년 8월 5일
·
0개의 댓글
·

리덕스+리액트 Redux with React #5 createReducer()

리덕스 툴킷 문서-createReducer createReducer() 리듀서를 작성하다보면 switch 문으로 작성하게 되는데 createRedicer()는 switch문 보다 더 단순한 구조로 리듀서를 작성하도록 도와주는 함수다.

2020년 7월 14일
·
0개의 댓글
·