정보실

웹학교

정보실

Reactjs 리액트와 함께 Redux 사용 : 실제 예제가 포함 된 전체 자습서 (일반 Redux 및 Redux 툴킷)

본문

React 사용 경험이 있습니까? Redux에 대해 들어 보았지만 매우 복잡해 보이고 모든 가이드가 압도적으로 보이기 때문에 학습을 중단 했습니까? 

이 경우에 해당하는 기사입니다. state를 포함하는 것에 대한 두려움을 억제하고 이 상대적으로 고통 없는 여정에서 나와 함께 가십시오.


https://www.taniarascia.com/redux-react-guide/ 


전제 조건 


React 자체에 대해서는 설명하지 않기 때문에 이 튜토리얼에서 React를 사용하는 방법을 이미 알고 있어야 합니다.

또한 Chrome 또는 FireFox 용 Redux DevTools를 다운로드하십시오.


목표 


이 자습서에서는 작은 블로그 앱을 빌드 합니다. 

API에서 게시물과 댓글을 가져옵니다. 

일반 Redux와 공식적으로 승인 된 Redux 툴킷인 RUX (Redux Toolkit)를 사용하여 동일한 앱을 만들었습니다. 

다음은 일반 및 RTK 버전의 소스 및 데모에 대한 링크입니다.


React + Redux Application (Plain Redux) 

React + Redux Toolkit Application 

참고 : 애플리케이션은 JSON Placeholder API를 통해 실제 API에서 가져옵니다. 

CodeSandbox의 속도 제한으로 인해 API가 느리게 나타날 수 있지만 Redux 응용 프로그램 자체와는 아무런 관련이 없습니다. 

저장소를 로컬로 복제 할 수도 있습니다. 


우리는 배울 것입니다 :

  • Redux 란 무엇이며 왜 사용해야 합니까?
  • Redux의 용어 : 조치, 감속기, 저장, 발송, 연결 및 컨테이너
  • Redux Thunk를 사용하여 비동기 API 호출
  • React 및 Redux를 사용하여 작은 실제 응용 프로그램을 만드는 방법
  • Redux 툴킷을 사용하여 Redux 앱 개발을 단순화하는 방법

Redux 란 무엇입니까? 


Redux는 JavaScript 응용 프로그램을 위한 상태 컨테이너입니다. 

일반적으로 React를 사용하면 구성 요소 수준에서 상태를 관리하고 소품을 통해 상태를 전달합니다. 

Redux를 사용하면 응용 프로그램의 전체 상태가 하나의 불변 개체로 관리됩니다. 

Redux 상태를 업데이트 할 때마다 상태 섹션의 사본과 새로운 변경 사항이 생성됩니다.


Redux는 원래 Dan AbramovAndrew Clark에 의해 만들어졌습니다.


왜 Redux를 사용해야 합니까? 

  • 전역 상태를 쉽게 관리-Redux 연결 구성 요소에서 상태의 일부에 액세스하거나 업데이트
  • Redux DevTools를 사용하여 변경 사항을 쉽게 추적하십시오. 모든 작업 또는 상태 변경을 추적하고 Redux를 사용하여 쉽게 수행 할 수 있습니다. 애플리케이션이 변경 될 때마다 애플리케이션의 전체 상태가 추적 된다는 사실은 시간 이동 디버깅을 쉽게 수행하여 변경 사항 간에 앞뒤로 이동할 수 있음을 의미합니다.

Redux의 단점은 (특히 Redux 툴킷 없이 일반 Redux를 사용하는 경우) 설정하고 유지해야 할 초기 상용구가 많이 있다는 것입니다. 더 작은 규모의 애플리케이션은 Redux가 필요하지 않을 수도 있고 대신 글로벌 상태 요구에 Context API를 사용하는 것 만으로도 이점을 얻을 수 있습니다.


Terminology 


일반적으로 용어와 정의의 목록을 만들고 싶지는 않지만 Redux에는 익숙하지 않은 몇 가지가 있으므로 다시 참조하기 쉽도록 미리 정의하겠습니다. 

튜토리얼 섹션의 시작 부분으로 건너 뛸 수 있지만 먼저 모든 정의를 읽고 머리에 노출과 아이디어를 얻는 것이 좋습니다.

예를 들어 일반적인 할 일 응용 프로그램과 할 일 삭제 작업을 사용하겠습니다.


Actions 


작업은 애플리케이션에서 Redux 저장소로 데이터를 보냅니다. 액션은 일반적으로 type과 (선택적) payload라는 두 가지 속성이 있는 객체입니다. 유형은 일반적으로 조치를 설명하는 대문자 문자열 (상수로 지정됨)입니다. payload는 전달 될 수 있는 추가 데이터입니다.


Action Type

const DELETE_TODO = 'DELETE_TODO' 


Action

{ type: DELETE_TODO, payload: id, } 


Action creators 


액션 생성자는 액션을 반환하는 함수입니다.


Action Creator

const deleteTodo = id => ({ type: DELETE_TODO, payload: id }) 


Reducers 


reducer는 state와 action의 두 가지 매개 변수를 취하는 함수입니다. reducer는 변경할 수 없으며 항상 전체 상태의 사본을 반환합니다. reducer는 일반적으로 가능한 모든 작업 유형을 거치는 switch 문으로 구성됩니다.


Reducer


const initialState = { todos: [ { id: 1, text: 'Eat' }, { id: 2, text: 'Sleep' }, ], loading: false, hasErrors: false, } function todoReducer(state = initialState, action) { switch (action.type) { case DELETE_TODO: return { ...state, todos: state.todos.filter(todo => todo.id !== action.payload), } default: return state } } 


Store 


Redux 애플리케이션 상태는 저장소에 있으며 리듀서로 초기화됩니다. React와 함께 사용하면 <Provider>가 존재하여 응용 프로그램을 래핑하며 Provider 내의 모든 항목이 Redux에 액세스 할 수 있습니다.


Store


import { createStore } from 'redux' import { Provider } from 'react-redux' import reducer from './reducers' const store = createStore(reducer) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) 


Dispatch 


dispatch는 Redux 상태를 업데이트하는 데 사용되는 개체를 허용하는 저장소 개체에서 사용할 수 있는 방법입니다. 일반적으로 이 오브젝트는 조치 작성자를 호출 한 결과입니다.


const Component = ({ dispatch }) => { useEffect(() => { dispatch(deleteTodo()) }, [dispatch]) } 


Connect 


connect() 함수는 React를 Redux에 연결하는 일반적인 방법 중 하나입니다. 연결된 구성 요소를 컨테이너라고도합니다.


자, 그 내용은 Redux의 주요 용어를 다루고 있습니다. 문맥 없이 용어를 읽는 것은 압도적 일 수 있으므로 시작하겠습니다.


시작하기 


빠른 시작을 위해 내 예제에서는 Create React App을 사용하여 환경을 설정합니다.


npx create-react-app redux-tutorial cd redux-tutorial 



Redux에는 몇 가지 종속성이 필요합니다.

당신은 yarn add하거나 npm i 할 수 있으며, react-router-dom도 사용할 것입니다. 그러나 그것은 추가적인 의존성을 위한 것입니다.

yarn add \ # or npm i redux \ react-redux \ redux-thunk \ redux-devtools-extension \ react-router-dom 


상용구를 모두 삭제하십시오. 대신 처음부터 필요한 모든 것을 추가합니다.


# move to src and delete all files within cd src && rm * 


Redux reducers 및 Redux actions 뿐만 아니라 이미 React에서 익숙한 pages 및 components에 대한 디렉토리를 만듭니다.

mkdir actions components pages reducers 


그리고 index.js, App.js 및 index.css를 다시 가져옵니다.


touch index.js index.css App.js 


이 시점에서 프로젝트 디렉토리 트리는 다음과 같습니다.


└── src/ ├── actions/ ├── components/ ├── pages/ ├── reducers/ ├── App.js ├── index.css └── index.js 


index.css 파일의 경우 이 요지의 내용을 가져 와서 붙여 넣기 만하면 됩니다. 나는 스타일에 관한 것이 아니라 기능성에 대해서만 다룰 계획이므로 사이트가 적절하게 보일 수 있도록 매우 기본적인 스타일을 작성했습니다.


이제 시작하기에 충분한 상용구가 준비되었으므로 진입 점 작업을 시작할 것입니다.


Redux Store 설정 


내가 Redux를 처음 배우기 시작했을 때, 내가 본 모든 앱에 index.js가 약간 다르게 설정 되었기 때문에 너무 압도적이었습니다. 

더 많은 최신 앱을 보고 모든 애플리케이션에서 공통적 인 측면을 취한 후, Redux 앱에 실제로 무엇이 있어야 하는지, 사람들이 물건을 옮기는 것 만으로도 좋은 느낌을 받았습니다. 독특하다.


todos를 설정하여 매우 기본적인 Redux 스토어를 얻는 방법을 보여주는 자습서가 많이 있지만 프로덕션 레벨 설정 방법을 아는 데는 도움이 되지 않으므로 설정하겠습니다. 시작부터 필요한 모든 것을 갖추고 있습니다. 그럼에도 불구하고 Redux는 매우 유연하기 때문에 몇 가지 의견이 있습니다.


index.js에서는 몇 가지를 가져올 것입니다.

  • createStore, Redux 상태를 유지할 저장소를 만듭니다.
  • 미들웨어를 사용할 수 있는 applyMiddleware (이 경우에는 썽크)
  • Redux에서 전체 응용 프로그램을 래핑하는 공급자
  • thux, Redux에서 비동기 작업을 수행 할 수 있는 미들웨어
  • composeWithDevTools, 앱을 Redux DevTools에 연결하는 코드

// External imports import React from 'react' import { render } from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { Provider } from 'react-redux' import thunk from 'redux-thunk' import { composeWithDevTools } from 'redux-devtools-extension' // Local imports import App from './App' import rootReducer from './reducers' // Assets import './index.css' const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk))) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) 


App.js에 컴포넌트를 넣습니다. 나중에 수정하지만 지금은 앱을 시작하고 실행하려고 합니다.


import React from 'react' const App = () => { return <div>Hello, Redux</div> } export default App 




페이지 정보

조회 158회 ]  작성일20-03-19 17:29

웹학교