React Redux 최종 프로젝트 - 여정은 계속됩니다

Bjarte Kvinge Tvedt에서 FreeImages 님의 사진

이것은 지금까지 참으로 흥미로운 여행이었습니다! 불과 몇 달 만에 얼마나 많은 것을 배웠는지 정말 자랑스럽습니다. 이 좋은 에너지를 계속 유지합시다!

저는 한동안 이 마지막 프로젝트에 대해 생각해 왔으며 구축에 대해 매우 흥분되는 아이디어가 있습니다. 그러나 프로젝트 시간이 다가오자 인생에서 가장 어려운 도전 중 하나에 직면하게 되었습니다. 최종 프로젝트의 세부 사항에 들어가기 전에 짧지만 슬픈 우회로를 찾는 것이 중요합니다. 내 사랑스러운 잉글리시 불독이 무지개 다리에 가까워지고 있었습니다. 우리는 그녀를 위해 최종 준비를 하라는 조언을 받았습니다. 내 생각과 마음이 너무 무거워서 생각을 바꿔야 한다는 것을 알았습니다. 집중할 수 있는 다른 방법이 없었습니다.
*자세한 내용은 엔딩 참고...

이제 다시 행복해져서 React와 Redux에 대해 이야기해 봅시다. 가지고 놀면 얼마나 재미있을까요? 주문에 대한 JavaScript를 배우면서 주위를 돌고 난 후에 React의 감각적으로 구조화된 구성 요소를 사용하여 작동하게 하는 것이 좋았습니다. 그리고 Redux는 하나의 깔끔한 저장소를 유지함으로써 상태 관리를 덜 복잡하게 만듭니다. 두 라이브러리 모두 잘 작성되고 따르기 쉬운 문서를 가지고 있습니다.

두 가지 작업을 즐기는 만큼 이 게시물에서는 Redux의 몇 가지 기본 사항에 초점을 맞추고 싶습니다. Redux는 일반적으로 복잡한 상태를 관리하는 데 사용되지만 최종 프로젝트에서 Redux를 사용하는 것은 훌륭한 학습 경험이었습니다.
Redux로 작업할 때 기억해야 할 몇 가지 중요한 사항을 살펴보겠습니다.

Redux의 세 가지 기본 원칙:

진실의 단일 소스

Your app's global state is stored within an object tree 
inside a single store. This makes debugging easier.

상태는 읽기 전용입니다.

Actions are the only way to initiate a change of state. 
This prevents any unwanted changes to your app's state.

순수 함수로 변경

Reducers specify exactly how state should be transformed 
by these actions. 

Note: a pure function is one that produces the same output when given the same input and is free from side-effects (doesn't alter outside state).

이해해야 할 또 다른 중요한 사항은 Redux 흐름입니다.

        Action ==> Reducer ==> Updated State

작업은 상태 변경을 시작하는 감속기로 전달됩니다.
더 나은 이해를 위해 이 멋진 다이어그램을 살펴보겠습니다.



https://stackoverflow.com/questions/45416237/axios-calls-in-actions-redux

여기에서 Redux를 통한 상태 변경의 흐름을 자세히 볼 수 있습니다. Store에는 작업을 트리거하는 사용자 상호 작용을 정의하는 현재 상태가 포함되어 있습니다. 요청된 Action은 Store에서 현재 State를 가져오고 요청된 Action을 적용한 다음 State의 업데이트된 새 버전을 반환하는 dispatch()를 사용하여 Reducer로 전송됩니다. 반환되는 State는 실제로 업데이트가 적용된 원래 State의 복사본입니다. State는 절대 변경되지 않는다는 점을 기억하세요. 스프레드 연산자를 사용하면 복사본을 만들고 필요한 변경 사항을 적용하고 이 업데이트된 State를 Store에 반환할 수 있습니다. 요약:

작업 작성자는 작업을 반환하는 함수입니다

.

작업은 리듀서가 상태를 변경하는 데 사용하는 명령이 포함된 키가 있는 개체입니다

.

리듀서는 내부에 두 개의 인수를 사용하여 상태를 변경하는 방법에 대한 지침을 받는 switch 문이 포함된 함수입니다.
현재 상태 및 작업

Redux의 Store는 두 가지 기능을 가진 객체입니다.

dispatch()는 상태 변경을 시작합니다

.

getState()는 현재 상태에 대한 액세스를 제공합니다

.






*끝 메모: Tankie는 실제로 훨씬 더 잘하고 있습니다. 우리는 결국 두 번째 의견과 약간의 희망을 얻었습니다. 우리는 또한 기적의 힘을 믿습니다. 좋은 생각을 보내주신 모든 분들께 감사드립니다!

또한 나의 새로운 아이디어는 너무 좋은 것이므로 확장 목표를 달성한 후에 그것에 관한 모든 게시물을 작성할 것입니다. 계속 지켜봐 주세요!


Cheryl Empey에서 FreeImages 님의 사진