나 5살처럼 Redux!

TLDR:Redux는 프로젝트에 추가할 수 있는 상태 관리 라이브러리입니다.여기에는 Redux.js.org, github repo 또는 체크 아웃Code Sandbox 링크가 있습니다.
안녕하세요, 저는 Brittney입니다. 저는 ZTM Academy의 강사이자 bDesigned의 소유자, 디자이너와 개발자입니다.너는 Console Logs에서 내가 쓴 개발 노트를 더 많이 찾을 수 있다.

Redux란 무엇입니까?

Redux는 응용 프로그램의 상태를 관리하는 데 도움을 주는 도구입니다.주를 하나의 상자로 상상해서 우리는 모든 장난감을 거기에 두었다.우리의 장난감을 가지고 놀려면, 우리는 그것들을 잘 정리해야만 비로소 그것들을 찾을 수 있다.Redux는 상태를 함께 구성합니다.그것은 또한 우리의 물건을 보호하여 그것들을 더욱 손상시키기 어렵게 할 수 있다.많은 개발자들은 Redux가 다른 JavaScript 라이브러리 React와만 사용할 수 있다고 생각하는 경향이 있지만, 실제로는 모든 시각적 라이브러리와 함께 실행할 수 있다.Redux의 무게는 매우 작고 2kb에 불과하며 많은 사람들이 끊임없이 내용을 개선하고 추가하고 있다.

Redux 전체 모드

Redux는 단방향 또는 단방향 데이터 흐름을 따릅니다.이것은 보기에서 시작됩니다. 즉, 사용자가 응용 프로그램에 접근할 때 보이는 화면의 항목입니다.만약 사용자가 단추를 누르거나 내용을 입력한다면, 우리는 몇 가지 일이 발생할 것이라고 예상한다.이것은 동작이라고 하는데, 동작이 발생할 때, 사용자에게 표시되는 내용을 변경해야 합니다.이를 위해 Redux는 몇 단계를 거쳐야 합니다.사용자가 응용 프로그램에서 작업을 수행할 때 시작합니다.이 동작은 Reducer 함수를 통해 스케줄링됩니다. 이것은sent의 화려한 단어일 뿐입니다.reducer는 발생할 수 있는 여러 가지 일을 하나의 최종 대상으로 간단하게 농축하여 사용자에게 보냅니다.그것은 같은 것을 입력할 때마다 같은 결과를 되돌려야 하는 순수한 함수를 필요로 한다.그리고 감속기는 새로운 압축 대상을 상점에 돌려주었다.상점은 하나의 용기입니다. 우리의 상자는 안에 국가가 담겨 있습니다.그런 다음 상태를 업데이트하고 뷰에 제공하여 업데이트합니다.현재, 사용자는 화면에서 그들이 원하는 것을 보았다!

왜 Redux예요?

다음은 프로젝트에 Redux를 추가하려는 몇 가지 이유입니다.

대형주를 관리하는 데 적합하다.

구성 요소 간에 데이터를 공유하는 데 사용됩니다.

예측 가능한 상태 관리.

Redux는 다음 세 가지 원칙을 사용하여 이 세 가지를 잘 완성했습니다.

1. 응용 프로그램의 전체 상태를 설명하는 하나의 실제 출처만 있습니다.

2. 상태는 읽기 전용이거나 변경할 수 없으며 각 작업은 상태의 새 버전을 작성합니다.

3. 순수 함수만 사용하여 상태를 변경합니다. 같은 입력을 지정한 함수는 항상 같은 출력을 가지고 있습니다.

Redux 시작

응용 프로그램 디렉터리의 터미널을 엽니다.Redux를 설치하려면 npm을 사용하려면 npm i redux, yarn을 사용하려면 yarn add redux 을 입력합니다.React 응용 프로그램에 있으면 React Redux라는 별도의 패키지를 설치해야 합니다.React Redux를 설치하려면 npm 입력 npm i react-redux 이나 사선 입력 yarn add react-redux 이 필요합니다.실제로 Redux를 포함하는createreact 응용 프로그램 템플릿이 있습니다.React 및 Redux를 실행하여 새 응용 프로그램을 시작합니다npx create-react-app my-app-name --template redux.

React Redux 설정

React에서 실행되는 프로젝트가 Redux를 추가하려면 프로그램을 변환하기 위한 설정이 필요합니다.Redux와reactredux 패키지를 응용 프로그램에 추가해야 합니다.React Redux에는 응용 프로그램이 Redux 상점에 접근할 수 있도록 하는 구성 요소가 있습니다.<Provider /> 파일에 들어가서 src/index.js 구성 요소 포장 공급자 구성 요소를 둘러싸십시오.

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./redux/store";

import Connect from "./Connect";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <Connect />
  </Provider>,
  rootElement
);

현재, 우리는 아직 진정으로 우리의 상점을 만들지 않았기 때문에, 우리는 다음에 이렇게 하자.프로그램을 만들 때, 모든 사람은 자신이 좋아하는 폴더 구조를 가지고 있는 것 같다. 이것은 단지 파일을 설정하는 방법일 뿐이다.파일을 가져오고 내보내는 데 익숙해지면 언제든지 가장 적합한 방법을 찾으십시오.React 프로그램의 <App /> 폴더에 redux라는 새 폴더를 만들고 이 폴더에 src 를 만듭니다.가게 안js는 Redux 저장소를 만들고 Reducer와 연결하는 곳입니다.Redux에서createStore와 applymiddleware를 가져와야 합니다. 아직 만들지 않은 루트 Reducer와 일부 중간부품 패키지로 비동기 함수를 처리해야 합니다.우리는 또한 우리의 응용 프로그램에 Reduxthunk와reduxlogger를 설치해야 한다.npm사용store.js, 방사선사용npm i redux-thunk redux-logger.Redux의createStore 함수는 3개의 선택 가능한 인자를 수용합니다.

1. reducer - 모든 동작을 새로운 상태 트리로 줄이고 다음 상태 대상을 되돌려주는 함수입니다.

2. [프리로드 상태] - 초기 또는 기본 상태입니다.

3. [증강기] - 미드레인지 또는 기타 타사 기능을 사용하여 스토리지를 향상시킬 수 있습니다.Redux에는 ApplyMiddleware () 가 하나만 추가됩니다.
이 프로그램에서 우리의 초기 상태는reducers 파일에 생성될 것입니다. 따라서 미리 불러오는 상태가 없습니다.

import { createStore, applyMiddleware } from 'redux'

// middleware for async reducers
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";

// reducer file we have not created yet
import { rootReducer } from './reducers.js'

const logger = createLogger();

// from redux call createStore(reducer, [preloadedState], [enhancer])
const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware, logger)
);

export default store

현재 우리는 상점을 만들었습니다. 우리는 actions 대상을 만들 것입니다.redux 폴더에 yarn add redux-thunk redux-logger 라는 새 파일을 만듭니다.응용 프로그램이 증가함에 따라 각각의 작업에 대해 단독 파일을 포함하는 폴더를 만들 수 있습니다.이것은 비교적 작은 응용 프로그램이기 때문에, 나는 그들을 하나의 동작으로 나누었다.js 파일.모든 작업은 발생한 이벤트에서 실행되고 현재 상태의 복사본을 제공합니다.그런 다음 유효한 하중이나 데이터를 업데이트하고 상태의 업데이트 복사본을 되돌려줍니다.모든 유형의 상수를 추적하고 작업에 가져오기 위해 actions.js 라는 파일을 만들어야 합니다.js 파일.상수js 파일은 선택할 수 있습니다. 비교적 큰 응용 프로그램에서 동작 형식의 모든 상수 이름을 저장하는 것은 흔히 볼 수 있는 방법입니다.

// constants.js
export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';
export const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';
export const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';
export const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';

// actions.js
import {
  CHANGE_SEARCHFIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
 } from './constants'


export const setSearchField = (text) => ({ type: CHANGE_SEARCHFIELD, payload: text })

export const requestRobots = () => (dispatch) => {
  dispatch({ type: REQUEST_ROBOTS_PENDING })
  const apiCall = (link) => fetch(link).then(response => response.json())
  apiCall('https://jsonplaceholder.typicode.com/users')
    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }))
}

지금 우리는 감속기를 만들어야 한다.여기서, 우리는 redux 폴더에 reducers라는 새 폴더를 계속 만들어야 할 수도 있습니다.그리고 각 동작 감속기에 대한 파일을 만듭니다.나는 constants.js, posts.js, comments.js을 만들었는데, 그것들은 우리의 모든reducer 함수를 하나의 함수로 조합할 것이다.지금 우리는 감속기 함수를 작성해야 한다.직장에서.js, 우리는 낡은 상태를 받아들이고 업데이트 버전을 만들 것입니다. 좋아요 수가 1 증가합니다.댓글에js,

import {
  CHANGE_SEARCHFIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
} from "./constants";
import { combineReducers } from "redux";

const initialStateSearch = {
  searchField: ""
};

export const searchRobots = (state = initialStateSearch, action = {}) => {
  switch (action.type) {
    case CHANGE_SEARCHFIELD:
      return Object.assign({}, state, { searchField: action.payload });
    default:
      return state;
  }
};

const initialStateRobots = {
  robots: [],
  isPending: true
};

export const requestRobots = (state = initialStateRobots, action = {}) => {
  switch (action.type) {
    case REQUEST_ROBOTS_PENDING:
      return Object.assign({}, state, { isPending: true });
    case REQUEST_ROBOTS_SUCCESS:
      return Object.assign({}, state, {
        robots: action.payload,
        isPending: false
      });
    case REQUEST_ROBOTS_FAILED:
      return Object.assign({}, state, { error: action.payload });
    default:
      return state;
  }
};

// take the 2 reducer functions and combine into 1
export const rootReducer = combineReducers({
  requestRobots,
  searchRobots
});

업데이트: 애플리케이션 연결

추천하는 갈고리 API를 사용하기 위해서, 나는 응용 프로그램 구성 요소를 클래스에서 기능 구성 요소로 바꾸고, 갈고리로 응용 프로그램을 연결한다.나는 아래에서 설명한 낡은 방법을 보류하고 Code Sandbox 에서 그것에 대해 주석을 달았기 때문에 당신은 두 가지 방법을 볼 수 있습니다.
갈고리를 사용하여 응용 프로그램을 연결하려면 rootReducer.js에 들어가야 합니다.우선, 우리는 사용해야 할 연결고리를 가져와야 한다.

useEffect - react의 방법입니다.

useDispatch - react redux에서 온 방법입니다.

usesSelector - react redux에서 온 방법입니다.

use Effect 연결을 사용하여 우리의component Did Mount 기능을 대체하여 로봇을 불러와야 합니다.react redux의useDispatch와useSelector는 Connect 구성 요소의MapStateTops와mapDispatchToProps 함수를 대체합니다.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setSearchField, requestRobots } from "./redux/actions";
import "./styles.css";

// components
import CardList from "./components/CardList";
import SearchBox from "./components/SearchBox";
import ErrorBoundary from "./components/ErrorBoundary";

const App = () => {
  // replaces mapDispatchToProps
  const searchField = useSelector(state => state.searchRobots.searchField);
  const robots = useSelector(state => state.requestRobots.robots);
  const isPending = useSelector(state => state.requestRobots.isPending);

  const filteredRobots = robots.filter(robot => {
    return robot.name.toLowerCase().includes(searchField.toLowerCase());
  });

  // replaces mapDispatchToProps
  const dispatch = useDispatch();

  const onSearchChange = e => dispatch(setSearchField(e.target.value));

  useEffect(() => {
    dispatch(requestRobots());
  }, [dispatch]);

  return (
    <div className="body">
      <div className="stickyHeader">
        <h1 className="f1">RoboFriends</h1>
        <SearchBox searchChange={onSearchChange} />
      </div>
      {isPending ? (
        <h1>Loading</h1>
      ) : (
        <ErrorBoundary>
          <CardList robots={filteredRobots} />
        </ErrorBoundary>
      )}
    </div>
  );
};

이전 방법: 애플리케이션 연결

우리가 해야 할 마지막 일은 우리의 응용 프로그램을 상점에 연결하는 것이다.src 폴더에 Connect라는 새 구성 요소를 만듭니다.js.연결 중입니다.js,reactredux에서connect를 가져오고 2개의 함수를 설정해야 합니다:MapStateTops와mapDispatchToProps.MapStateTops에서는 모든 서브어셈블리에 상태 또는 스토리지에 대한 액세스 권한을 제공합니다.mapDispatchToProps에서 이벤트를 올바른 작업으로 보냅니다.

import { connect } from "react-redux";
import { setSearchField, requestRobots } from "./redux/actions";
import App from "./App";

const mapStateToProps = state => ({
  searchField: state.searchRobots.searchField,
  robots: state.requestRobots.robots,
  isPending: state.requestRobots.isPending
});

const mapDispatchToProps = dispatch => ({
  onSearchChange: event => dispatch(setSearchField(event.target.value)),
  onRequestRobots: () => dispatch(requestRobots())
});

// we take the 2 functions and connect them to our App component
const Connect = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default Connect;

마지막으로, 우리의 응용 프로그램은 완전히 Redux에 연결됩니다!이것은 우리의 최종 폴더 구조입니다.

-public
-src
  -components
    -Card.js
    -CardList.js
    -ErrorBoundary.js
    -SearchBox.js
    -component-styles.css
  -redux
    -actions.js
    -constants.js
    -reducers.js
    -store.js
  App.js
  Connect.js
  index.js
  styles.css
package.json

나머지 구성 요소의 코드 here 나 체크 아웃 Code Sandbox 을 찾을 수 있습니다.당신이 나에게 가입해 주셔서 감사합니다. 만약 이 문장이 당신에게 도움이 된다면, 그것을 좋아하는 것을 기억하세요!