Redux 데이터 흐름 및 React 구성 요소 라이프 사이클

Almost everyone who wants to learn Redux had seen this image before. It's pretty straight forward for me right now, but it's hard to understand when I first learned Redux. To have a better understanding of the data flow in Redux. In this article, I will try to explain how Redux works with React. And also try to implement Redux through React hooks.

우선 Redux부터 시작하겠습니다.

Redux는 상태 관리 시스템입니다.따라서 다음이 필요합니다.

나라를 구한 곳

상태를 얻는 방법

상태 변경 방법

이것이 바로 우리가 Redux를 사용할 때 한 일입니다.
1.store은 우리가 나라를 구한 곳입니다.

import { createStore } from "redux";
import { reducer } from "./reduxModule";

const store = createStore(reducer);

2.getState은 상태를 얻는 방법입니다.

const state = store.getState();

3.action 및 reducer은 MapStateTops를 변경하는 방법입니다.

const INCREMENT = "redux/increment";
const initialState = {
  counter: 0,
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        counter: state.counter + action.amount
      };
    default:
      return state;
  }
};

export const incrementAction = (amount = 1) => {
  return {
    type: INCREMENT,
    amount,
  };
};

우리가 설명해야 할 부분은 action과 reducer이다.
Redux는 action 및 reducer을 통해 상태를 업데이트합니다.action은 reducer에게 무엇을 하고 싶은지 알려준다.그리고 reducer은 action에서 제공한 유형과 추가 데이터에 따라 상태 라이브러리를 업데이트합니다.

왜 액션과reducer를 사용합니까?

나는 많은 사람들과 왜 그들이 프로젝트에서 Redux를 사용하는지 토론했다.거의 매번 답은'구성 요소 간에 도구를 공유하기 쉽고 prop-drilling을 방지한다'는 것이다.안정적인 context API이 없을 때 Redux 공유 도구를 사용하는 것이 합리적인 선택인 것 같아서요.그러나 내가 보기에 이것은 Redux의 핵심 개념이 아니다.action과 reducer을 사용하여 상태를 업데이트하면 더욱 쉽게 제어할 수 있습니다.상태는 우리가 정의한 조작에 따라 변경할 수 있습니다.상태를 어떻게 바꾸는지에 대한 모든 논리는 reducer에 있다.이것은 유지보수를 더욱 쉽게 할 수 있다.
이 생각은 finite-state machine과 같다.만약 우리가 더 많은 상태를 추가하고 싶다면,
다른 동작을 설명하고 논리를 Reducer에 추가하기만 하면 됩니다.state machines에 대한 자세한 내용을 알고 싶으시면Kent C. Dodds에서 작성한 this post을 볼 수 있습니다.
이제 우리는 이렇게 Redux를 시각화할 수 있습니다.

은 초기 단계에서 감속기가 초기 상태로 수신되어 되돌아옵니다.따라서 getState에서 초기 상태 ({counter:0}) 를 얻을 것입니다.

은 업데이트 단계에서 Reducer에 증량 작업 (redux에서 dispatch) 을 보냅니다. Reducer에서 정의한 switch 문장을 통해 새로운 상태 ({counter:0}) 를 되돌려줍니다.

다음은 React를 적용합니다.

React에서 Redux를 구현하려면 다음 세 가지가 필요합니다.

React

에 스토리지 상태 저장

반응 모듈

의 상태 얻기
반응 모듈 의

스케줄링 조작
프로젝트 1react-redux에는 Provider이라는 구성 요소가 있어서 우리가 이 일을 완성하는 데 도움을 줄 수 있다.

import { createStore } from "redux";
import { Provider } from "react-redux";

const store = createStore(reducer);

return (
  <Provider store={store}>
    <Container />
  </Provider>
)

프로젝트 2와 3react-redux에 대해 또 다른 임시 호출 connect을 제공합니다.그것은 상태와 동작을 구성 요소 도구로 만들 것이다.따라서 React 구성 요소에서 사용할 수 있습니다.

import { connect } from "react-redux";
import { incrementAction } from "./reduxModule";

const mapStateToProps = state => ({ counter: state.counter });
const mapDispatchToProps = { incrementAction };
export default connect(mapStateToProps, mapDispatchToProps)(Comp);

현재, 우리 구성 요소는 수신 상태와 스케줄링 작업을 할 수 있습니다.따라서 이렇게 우리의 구성 요소를 완성하기 쉽다.

import React from "react";

export default function Comp({ counter, incrementAction }) {
  function handleIncreaseOne() {
    incrementAction(1);
  }
  function handleIncreaseTen() {
    incrementAction(10);
  }
  return (
    <div>
      <span>{counter}</span>
      <div>
        <button onClick={handleIncreaseOne}>+1</button>
        <button onClick={handleIncreaseTen}>+10</button>
      </div>
    </div>
  );
}

다음은 모든 코드입니다. 참고: https://github.com/oahehc/react-redux-example/tree/basic
Redux를 React에 통합하면 시각화는 다음과 같습니다.

React 연결을 통해 Redux 구현

이제 Redux가 어떻게 상태를 관리하는 데 도움을 주는지 알게 되었기 때문에 React 갈고리를 통해 같은 생각을 적용할 수 있습니다.
(*이것은 Redux의 기본 사상을 보여주는 예일 뿐입니다. 프로젝트에서 Redux과 React-Redux을 바꾸지 마십시오. Redux에 대한 자세한 정보를 알고 싶으면 Dan Abramov가 만든 this tutorial을 보십시오.)
우리가 이전에 한 것처럼 우리는 세 가지 항목으로 나눌 수 있다.

보존 상태의 곳 ->context API

React component->useContext에서 상태를 가져오는 방법

반응 구성 요소 -> useContext 및 useReducer에서 상태를 변경하는 방법

// @ReduxModule.js : reducer and action
const INCREMENT = "redux/increment";

export function reducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return state + action.amount;
    default:
      return state;
  }
}

export function incrementActionCreator(dispatch) {
  return amount => {
    dispatch({
      type: INCREMENT,
      amount
    });
  };
}

// @Provider.js : apply context API to save the state
import React, { useReducer } from "react";
import { reducer, incrementActionCreator } from "./ReduxModule";

export const ReduxContext = React.createContext();
const initialState = 0;
function ReduxProvider({ children }) {
  const [counter, dispatch] = useReducer(reducer, initialState);

  return (
    <ReduxContext.Provider
      value={{ counter, incrementAction: incrementActionCreator(dispatch) }}
    >
      {children}
    </ReduxContext.Provider>
  );
}

export default ReduxProvider;

// @Comp.js : apply useContext to get state and action from Context
import React, { useContext } from "react";
import { ReduxContext } from "./Provider";

export default function Comp() {
  const { counter, incrementAction } = useContext(ReduxContext);

  function handleIncreaseOne() {
    incrementAction(1);
  }
  function handleIncreaseTen() {
    incrementAction(10);
  }
  return (
    <div>
      <span>{counter}</span>
      <div>
        <button onClick={handleIncreaseOne}>+1</button>
        <button onClick={handleIncreaseTen}>+10</button>
      </div>
    </div>
  );
}

참조 번호: https://github.com/oahehc/react-redux-example/tree/custom-redux
React 갈고리를 통해 Redux를 구현할 때 useContext과 useReducer을 사용합니다.Redux의 핵심 개념은 다음과 같습니다.

useContext: 여러 구성 요소와 공유 상태

useReducer: 상태 머신을 통해 상태

처리

결론

읽어주셔서 감사합니다.나는 이 문장이 Redux를 더욱 쉽게 이해할 수 있기를 바란다.질문이나 피드백이 있으면 언제든지 의견을 발표하십시오.
--

참고

Redux

React-Redux

prop-drilling

implementing-a-simple-state-machine-library-in-javascript

getting-started-with-redux

context

useContext

useReducer