Redux 및 Sagas를 사용하는 React 인증 앱

개요

이번 포스팅에서 다룰 내용은 다음과 같습니다.

Auth 앱을 작업하는 동안 위에서 언급한 지점을 방문할 것입니다.
Redux가 React와 관련이 없다는 사실을 확인합시다. Redux는 Angular에서도 사용할 수 있습니다. Redux는 React로 완벽하게 젤화됩니다. 그래서 redux가 무엇인지 질문에 대답하겠습니다.
간단하게 Redux는 "애플리케이션 상태 관리를 위한 오픈 소스 JavaScript 라이브러리"입니다. 일관되게 작동하는 애플리케이션을 작성하는 데 도움이 됩니다.

이것을 더 멋지게 만들기 위해 실제 API를 사용합시다. 내 저장소에 있는 백엔드 API 서비스(예: Authentication with Node)를 사용하고 README 파일에 언급된 지침에 따라 서비스를 실행하거나 자체 json 웹 토큰 기반 API를 사용할 수 있습니다.

쇼를 시작하자!!

쇼를 시작하려면 반응 앱을 준비해야 합니다. 이렇게 하려면 명령을 따르십시오.
create-react-app가 설치되어 있는지 확인하십시오.
가) $ npm install -g create-react-app
반응 앱 만들기
b) $ npx create-react-app my-app
my-app 디렉토리로 이동
다) $ cd my-app
반응 앱 실행
d) $ npm start
필요한 모든 패키지를 설치합시다
e) $ npm i redux react-redux redux-saga react-router redux-form --save
이제 반응 앱을 준비했습니다. 자, 들어가 봅시다.
code 디렉토리에 있습니다. 구조의 개요는 다음과 같습니다.

src/  
  login/       
    actions.js
    constants.js
    sagas.js
    selector.js
    reducer.js
    index.js
    components/
             login.js
  register/
    actions.js      
    constants.js
    sagas.js
    selector.js
    reducer.js
    index.js
    components/
             register.js

  user/
    reducer.js
    actions.js
    constants.js

  share/
    Messages.js

  helpers/
    api-errors.js
    check-auth.js

Main.js
index-reducer.js  
index-sagas.js

방금 만든 폴더와 파일을 살펴보겠습니다.login/ , register/ & user/login/ & register/는 우리가 사용할 경로입니다.

이제 우리가 만든 파일로 이동합니다.
a) actions.js는 애플리케이션에서 스토어로 데이터를 전송하는 정보 페이로드입니다. 그것들은 일반 Javascript 객체입니다.
b) reducer.js 상점에 보낸 응답으로 응용 프로그램의 상태가 변경되는 방식을 지정합니다.
c) constants.js 액션과 리듀서에 대한 상수가 있는 곳
d) sagas.js 여기에서 불순한 작업, 즉 데이터 가져오기와 같은 비동기 작업을 관리합니다.
e) index-reducer.js & index-sagas.js는 모든 감속기와 사가를 결합하는 허브입니다.

코드로 들어가자

1) 디렉토리src/index

index.js의 전체 코드는 다음과 같습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import { routerMiddleware } from 'react-router-redux';
import { history } from './history';
import { Router } from 'react-router-dom';

// Import all of our components
import App from './App';
import './index.css';

// Import the index reducer and sagas
import IndexReducer from './index-reducer';
import IndexSagas from './index-sagas';

import registerServiceWorker from './registerServiceWorker';

// Setup the middleware to watch between the Reducers and the Actions
const sagaMiddleware = createSagaMiddleware();

const routersMiddleware = routerMiddleware(history);

/*eslint-disable */
const composeSetup =
    process.env.NODE_ENV !== 'production' && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
        : compose;
/*eslint-enable */

const store = createStore(
    IndexReducer,
    composeSetup(applyMiddleware(sagaMiddleware, routersMiddleware)) // allows redux devtools to watch sagas
);

// Begin our Index Saga
sagaMiddleware.run(IndexSagas);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>
    document.getElementById('root')
);
registerServiceWorker();

이제 위의 보일러 코드를 살펴보겠습니다.

   import React from 'react';
  import ReactDOM from 'react-dom';
  import { applyMiddleware, createStore, compose } from 'redux';
  import { Provider } from 'react-redux';
  import createSagaMiddleware from 'redux-saga';
  import { routerMiddleware } from 'react-router-redux';
  import { history } from './history';
  import { Router } from 'react-router-dom';

  // Import all of our components
  import App from './App';
  import './index.css';

  // Import the index reducer and sagas
  import IndexReducer from './index-reducer';
  import IndexSagas from './index-sagas';

import the required pakages

미들웨어

const  sagaMiddleware  =  createSagaMiddleware()
const  routersMiddleware  =  routerMiddleware(history);

Redux 미들웨어를 생성하고 Saga를 Redux Store에 연결합니다.

상점 만들기

/*eslint-disable */
const composeSetup = process.env.NODE_ENV !== 'production' && typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose
/*eslint-enable */

const 스토어 = createStore(
인덱스 감속기,
composeSetup(applyMiddleware(sagaMiddleware, routersMiddleware)),
)




 Here ` composeSetup(applyMiddleware(sagaMiddleware, routersMiddleware)),` allows redux to watch sagas and router

+ To Start the Saga middleware



  ```javascript
  sagaMiddleware.run(IndexSagas)

applyMiddleware 단계 이후에만 실행할 수 있습니다.

이제 Index.js를 렌더링하겠습니다.

  ReactDOM.render(
    <Provider  store={store}>
      <Router  history={history}>
        <App  />
      </Router>
    </Provider>,
    document.getElementById('root')
  );
  registerServiceWorker();

그래서 여기 우리는 store에 반응 앱을 제공하고 있습니다.

2) 이제 <Provider store={store}>에 들어가겠습니다.

 ```javascript 
 import { combineReducers } from  'redux'
 import { reducer  as  form } from  'redux-form'

 const  IndexReducer  =  combineReducers({
        form
 })
 export  default  IndexReducer
 ```

index-reducer.js 헬퍼 함수는 값이 서로 다른 감소 함수인 객체를 combineReducers에 전달할 수 있는 단일 감소 함수로 바꿉니다.

3) createStore에 들어가자

import { all } from  'redux-saga/effects';
export  default  function*  IndexSaga() {
yield  all([ ]);
}

4) 이제 감속기의 인덱스를 완료했으므로 saga 및 기본 인덱스는 index-saga.js에 들어갈 수 있습니다.

import  React, { Component } from  'react';
import  './App.css';
import  Main  from  './Main';
class  App  extends  Component {
  render() {
    return (
      <div  className="App">
        <Main  />
      </div>
    );
  }
}
export  default  App;

여기 앱App.js에는 경로가 존재합니다.

5) 응용 프로그램의 경로, 즉 주 구성 요소를 처리하기 위해 구성 요소를 분리했습니다.

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from '../src/login';
import Register from '../src/register';

export default class Main extends React.Component {
    render() {
        return (
            <main>
                <Switch>
                    <Route path="/login" component={Login} />
                    <Route path="/register" component={Register} />
                </Switch>
            </main>
        );
    }
}

파헤쳐 보자,<Main />Switch는 경로를 독점적으로 렌더링한다는 점에서 독특합니다. 반대로 위치와 일치하는 모든<Switch>은 포괄적으로 렌더링됩니다.

Reference

이 문제에 관하여(Redux 및 Sagas를 사용하는 React 인증 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/srivasthava12/react-authentication-app-using-redux-and-sagas-anp

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Redux 및 Sagas를 사용하는 React 인증 앱

개요

쇼를 시작하자!!

Reference

좋은 웹페이지 즐겨찾기