redux, react-redux, redux-thunk의 차이점은 무엇입니까?

redux, react-redux, redux-thunk의 차이점은 무엇입니까?

리액트+플럭스를 사용하고 있습니다.우리 팀은 플럭스에서 리덕스로 전환할 계획이다.플럭스의 세계에서 온 레독스는 나에게 매우 혼란스럽다.플럭스 제어 흐름은 컴포넌트 -> 액션 -> 업데이트 백컴포넌트 저장 및 저장에서 심플합니다.단순하고 매우 명확합니다.

하지만 요약하자면 혼란스럽다.여기는 매장이 없습니다. 네, 매장을 사용하지 않는 예가 몇 가지 있습니다.여러 가지 튜토리얼을 거쳤는데, 구현 스타일은 사람마다 다 있는 것 같아요.컨테이너를 사용하는 사람도 있고 사용하지 않는 사람도 있습니다(이 컨테이너 개념을 모르기 때문에 mapStateToProps, mapDispatchToProps의 기능을 이해할 수 없습니다).

1. 제어 흐름이 환원될 때 어떻게 발생하는지 누군가가 명확하게 설명할 수 있습니까?
2. redx에서 컴포넌트/컨테이너/액션/액션 크리에이터/스토어의 역할은 무엇입니까?
3. redux/react-redux/redux-thunk/기타와의 차이점
4. 간단하고 정확한 Redux 튜토리얼에 대한 링크를 게시해 주시면 매우 도움이 될 것입니다.

1. 제어 흐름이 환원될 때 어떻게 발생하는지 누군가가 명확하게 설명할 수 있습니까?

Redux는 (항상) 하나의 스토어를 가지고 있습니다.

1. 저장소의 상태를 바꿀 때마다 작업을 디스패치합니다.

2. 액션이 하나 이상의 환원 장치에 의해 포착되었습니다.

3. 리듀서는 오래된 상태와 디스패치된 액션을 조합한 새로운 상태를 만듭니다.

4. 스토어 사용자에게 새로운 상태가 발생했음을 통지합니다.

2. redx에서 컴포넌트/컨테이너/액션/액션 크리에이터/스토어의 역할은 무엇입니까?

• Store - 상태를 유지하고 새로운 액션이 도착하면 디스패치 -> 미들웨어 -> 리듀서스 파이프라인을 실행하여 상태가 새로운 것으로 대체되면 사용자에게 알립니다.

• 구성 요소 - 상태를 직접 인식하지 못하는 바보 같은 보기 부품입니다.프레젠테이션 컴포넌트라고도 합니다.

• 용기 - 반응 리듀스를 사용하여 상태를 인식하는 뷰의 일부입니다.스마트 컴포넌트, 고차 컴포넌트라고도 합니다.

---

컨테이너/스마트 컴포넌트 대 바보 컴포넌트는 어플리케이션을 구성하기 위한 좋은 방법입니다.

---

• 동작 - 플럭스와 동일 - 유형 및 페이로드의 명령 패턴.

• Action Creators - 드라이 방식으로 액션을 만듭니다(엄밀하게 필요하지 않습니다).

3. redux/react-redux/redux-thunk/기타와의 차이점

• redux - 단일 스토어의 플럭스 같은 흐름으로, 바닐라 js, 반응, 각도 1/2 등 원하는 환경에서 사용할 수 있습니다.

• react-synamx - 환원물과 반응물 사이의 결합.라이브러리는 리액트 훅 세트를 제공합니다.useSelector() , , , , 입니다.useStore()useDispatch()액션을 디스패치합니다.또한 이 함수를 사용하여 스토어의 상태 변경을 청취하고 래핑된 구성요소에 대한 소품을 준비하며 상태가 변경될 때 래핑된 구성요소를 다시 렌더링하는 HoC(고차 구성요소)를 작성할 수 있습니다.

• redux-thunk - 액션 대신 함수를 반환하는 액션 크리에이터를 작성할 수 있는 미들웨어입니다.트렁크를 사용하여 액션의 디스패치를 지연시키거나 특정 조건이 충족된 경우에만 디스패치를 수행할 수 있습니다.주로 api에 대한 비동기 호출에 사용되며, 성공 또는 실패 시 다른 액션을 디스패치합니다.

4. 간단하고 정확한 Redux 튜토리얼에 대한 링크를 게시해 주시면 매우 도움이 될 것입니다.

• Redux 공식 문서

• Redux의 시작

• Idiomatic Redux를 사용한 리액트 애플리케이션 구축

• 프레젠테이션 컴포넌트 및 컨테이너 컴포넌트

제목 질문에 답변하려면:

redux, react-redux, redux-thunk의 차이점은 무엇입니까?

1. redux: 메인 라이브러리(React와 독립)
2. redux-thunk: 비동기 처리를 지원하는 Redux 미들웨어
3. react-redux: React Components와 redux 스토어 연결

• redux: 응용 프로그램 상태를 관리하기 위한 라이브러리입니다.
• react-redux: React 어플리케이션(redux) 상태를 관리하기 위한 라이브러리.
• redux-thunk: 로깅, 크래시 리포트, 비동기 API와의 통신, 라우팅 등을 위한 미들웨어...

내 생각에, Redux는 이 도서관을 처음 공부하기에는 아직 조금 혼란스럽고, 그것을 이해하고 사용하기 위해서는 약간의 시간이 필요하다.최신 라이브러리(Redux 작성자)인 Redux Toolkit을 사용하더라도 처음부터 불분명할 수 있는 까다로운 순간도 있습니다.

마스터 훅을 사용하고 있습니다.

Redux, react-redux, redux-thunk 및 reselect는 라이브러리에 이미 설치되어 있으므로 절차를 따라야 합니다.

첫 번째 단계: 'src/hooks.js' 파일을 만듭니다.

import MasterHook from 'master-hook'

export const useMyHook = MasterHook({
  storage: "myStorage",
  initialState: {
    myName: 'Vanda',
  },
  cache: {
    myName: 10000,
  }
})

컴포넌트를 생성하여 내보냅니다(useMyHook). 초기 상태 설정(initialState:...) 값이 캐시되는 시간(ms)을 설정합니다(cache:...).

두 번째 단계:src/index.js에 공급자 추가

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MasterHook from 'master-hook';

ReactDOM.render(
  <React.StrictMode>
    <MasterHook.Provider>
      <App />
    </MasterHook.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

• 마스터 가져오기후크
• 파일을 MasterHook으로 래핑합니다.프로바이더

세 번째 단계:src/App.js에서 후크를 사용합니다.

    import logo from './logo.svg';
    import './App.css';
    import { useMyHook } from './hooks'
    
    function App() {
      const { myName, setMyName } = useMyHook()
    
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              My name is {myName}
            </p>
            <a
              onClick={() => setMyName('Boris')}
              className="App-link"
            >
              Set my name to 'Boris'
            </a>
          </header>
        </div>
      );
    }

export default App;

후크 Import use My후크

갈고리를 선언하다

const { myName, setMyName } = useMyHook()

코드로 사용

{myName}

그리고.

{()=>setMyName('')}

페이지가 변경되지 않도록 하려면 href 속성을 삭제합니다.set MyName 액션이 자동으로 생성됩니다.

스토어에 연결할 필요가 없습니다.이미 연결되어 있습니다.

네 번째 단계:프로젝트 실행!

npm run start

이상입니다:)

아래 이미지는 데이터 흐름(redux: 데이터 흐름)을 보여줍니다.Redux의 장점은 다음과 같습니다.

결과의 예측 가능성– 항상 하나의 진실 소스(스토어)가 존재하기 때문에 현재 상태를 동작 및 애플리케이션의 다른 부분과 동기화하는 방법에 대한 혼란이 없습니다.유지보수성 – 예측 가능한 결과와 엄격한 구조를 통해 코드 유지보수가 쉬워집니다.서버측 렌더링– 서버에서 작성한 스토어를 클라이언트측으로 전달하기만 하면 됩니다.이 기능은 초기 렌더링에 매우 유용하며 애플리케이션 성능을 최적화하여 더 나은 사용자 환경을 제공합니다.개발자 도구 – 액션에서 상태 변경까지 개발자는 애플리케이션에서 발생하는 모든 것을 실시간으로 추적할 수 있습니다.커뮤니티와 에코시스템– Redx의 배후에 큰 커뮤니티가 있기 때문에 더욱 매력적입니다.재능 있는 사람들의 큰 공동체는 도서관의 개선에 기여하고 도서관과 함께 다양한 응용 프로그램을 개발합니다.테스트의 용이성– Redux의 코드는 대부분 작고 순수하며 격리된 기능입니다.이것에 의해, 코드는 테스트 가능하고 독립적입니다.[조직] [2] - Redx는 코드 구성 방법을 정확하게 파악하고 있기 때문에 팀이 코드 구성 작업을 할 때 코드가 더욱 일관되고 쉬워집니다.

언급URL : https://stackoverflow.com/questions/38405571/what-are-differences-between-redux-react-redux-redux-thunk