JavaScript/Redux (4) 썸네일형 리스트형 Redux - 고급 사용법 목차 비동기 Action 리덕스 미들웨어 redux-devtools redux-thunk redux-promise-middleware Ducks 패턴 redux-saga 1. 비동기 Action 비동기 API를 호출할 때, 호출을 시작하고 응답을 받았을 때, 앱에서 두 순간 모두 상태 변화를 요구한다면, 리듀서에 각각 다른 액션을 보내야 할 것입니다. 예를 들어, 아래와 같이 말이죠. export const GET_USERS_START = "GET_USERS_START"; export const GET_USERS_SUCCESS = "GET_USERS_SUCCESS"; export const GET_USERS_FAILED = "GET_USERS_FAILED"; // 비동기 API 호출이 시작됨을 알리는 .. Redux - react-redux 1. react-redux? 리액트 노드 패키지로써, 리액트에 리덕스를 좀 더 사용하기 편리하도록 만든 라이브러리입니다. 기존 리덕스와 마찬가지로, 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어의 과정을 통해 상태를 변경합니다. 차이점은 connect라는 함수가 사용된다는 점입니다. 2. 기본 사용법 아래 예제는 간단히 추가 버튼을 누르면, TodoList에 값이 추가되어 보여지는 앱을 만드는 예제입니다. 먼저, react-redux를 설치합니다. $ npm i react-redux connect 함수를 사용해 TodoList 컴포넌트를 생성합니다. import { connect } from 'react-redux'; function TodoList({ todos }) { return ( {todo.. Redux - 사용해보기 리덕스의 기본적인 내용은 아래 글을 참고해 주세요. https://sty110357.tistory.com/78 ---- 1. 기본적인 사용법 리덕스의 구성요소인 Actions, Reducer, Store를 생성하고 State를 변경해 봅니다. Redux 설치 npx create-react-app redux-test && cd redux-test npm i redux Action Creator 생성 /* actions.js */ // 액션 타입 문자열의 오타 실수를 방지하기 위해 상수로 선언 export const ADD_TODO = "ADD_TODO"; // 액션 생성자 함수 선언 export default function addTodo(todo) { return { type: ADD_TODO, todo.. Redux - Basic 이 글은 아래 포스팅을 번역한 글입니다. https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/ ---- 목차 Redux Redux를 언제 사용해야 할까 Redux가 필요한 이유 Redux의 동작 방식 Actions Reducer Store Middleware 결론 1. Redux 리덕스는 JavaScript 앱이 일관성 있고, 테스트하기 쉽도록 돕는 예측 가능한 상태 컨테이너입니다. 리액트에선 대부분 상태 관리 도구로 사용되고 있고, 다른 JavaScript 프레임워크나 라이브러리에서도 사용할 수 있습니다. 리덕스를 사용하면 앱의 상태를 스토어에 저장하고, 각 컴포넌트들이 스토어에 저장된 상태에 접근할 수 있습니.. 이전 1 다음
