React 웹 앱에서 Redux 구조화

5901 단어 redux react beginners reduxthunk

리덕스란?

Redux는 자바스크립트 프레임워크를 사용하여 복잡한 웹 애플리케이션을 구축할 때 사용되는 상태 관리 도구입니다. React-Redux는 반응 프레임워크를 위해 특별히 제작되었으며 Redux 팀에서 유지 관리합니다.

React-Redux가 왜 중요한가요?

읽고 쓸 수 있는 앱의 상태를 나타내는 일관된 데이터 구조가 필요한 크고 복잡한 애플리케이션을 구축할 때 React-Redux와 같은 상태 관리 도구가 필요합니다. 이를 통해 구성 요소 간에 데이터를 쉽게 추적할 수 있습니다.

필요하세요?

웹 포털 또는 데이터 집약적 웹 앱을 구축하는 경우 예, 시간당 서버에서 보내고 받는 데이터를 관리하는 데 필요합니다.

이 기사의 내용과 그렇지 않은 내용

React-Redux가 무엇인지 완전히 설명하는 것은 아닙니다. react-redux에 대해 알아보려면 다음을 확인하십시오Link.

쉽게 사용할 수 있도록 react-redux를 설정하고 구성하는 방법을 보여주기 위한 것입니다. 기본적으로 시작하는 데 필요한 상용구 코드입니다.

시작하자

React-Redux에는 세 가지 주요 구성 요소가 있습니다.

점포

액션

리듀서

스토어 - 이름에서 알 수 있듯이 모든 데이터를 보관하는 창고와 같습니다. 즉, 모든 상태가 저장되는 곳입니다.

액션 - 이름에서 알 수 있듯이 액션은 저장소에서 데이터를 쓰거나 가져오기 위해 사용자가 redux에 발행하는 명령입니다. 두 가지 주요 속성이 있는 개체입니다. {type: "DO_THIS", payload: dataObject} .

감속기 - 감속기는 응용 프로그램에서 작업을 수행하고 작업을 수행하며 전달된 작업을 기반으로 새 상태를 반환하는 기능입니다.

기본 종속성 설치

npm i redux react-redux redux-thunk

/src 디렉토리에 저장소 폴더를 만듭니다

.
/src/store에서 store 폴더에 index.js 파일을 추가합니다./src에서 Actions 폴더를 추가합니다./src에서 Reducers 폴더를 추가합니다.

다음과 같아야 합니다.

/src/actions/ 에서는 비슷한 고민을 그룹화하기 위해 모듈별로 액션 파일을 생성한다. 예를 들어,AuthenticationActions.js - 함유할 수 있음 signInAction(); logoutAction();BlogActions.js - getBlogPostAction(); deleteCommentAction(); updateBlogPostAction(); 등을 포함할 수 있습니다.

이 예에서는 https://jsonplaceholder.typicode.com/users에서 사용자를 가져오는 TestAction.js 파일을 생성합니다.
/src/actions/TestAction.js에서,

export const getAllPosts = () => {
  return (dispatch) => {
    //   fetch placeholder data from jsonplaceholder
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((result) =>
        //dispatch response to the store
        dispatch({ type: "DO_THIS", payload: result })
      );
  };
};

/src/reducer/에서 TestReducer.js 파일을 생성하면 애플리케이션 내의 특정 모듈에 대한 상태를 처리하기 위해 여러 리듀서를 생성할 수 있습니다.
두 개의 매개변수를 받는 Test Reducer 함수를 생성합니다.
- 상태(기본값은 원래 상태로 설정) 및 작업
- 스위치를 사용하여 동작 유형을 확인한 다음 상태를 업데이트합니다.
/src/reducer/TestReducer.js에서

const initialState = {
  users: null,
};

export default function TestReducer(state = initialState, action) {
  switch (action.type) {
    case "DO_THIS":
      return {
        ...state,
        users: action.payload,
      };
    default:
      return state;
  }
}

/src/reducer/ 에서 Reducer 폴더 내에 index.js 파일을 만들어 모든 리듀서를 결합합니다. Redux는 앱의 모든 감속기를 결합하기 위한 combineReducer 함수를 제공합니다.
- const 감속기 = combineReducer({});
/src/reducer/TestReducer.js에서,

import { combineReducers } from "redux";
import TestReducer from "./TestReducer";

const reducers = combineReducers({
  Test: TestReducer,
  //other reducers come here...
});

export default reducers;

/src/store/index.js 에서 생성된 모든 리듀서를 위한 저장소를 생성합니다.

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import reducers from "./Reducers";

//thunk middleware is used to intercept actions so as to make API call before dispatching result to reducer
const store = createStore(reducers, applyMiddleware(thunk));

export default store;

드디어,Index.js에서 전역적으로 애플리케이션에 상점을 제공합니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

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

Store 파일 구조는 다음과 같아야 합니다.