ReduxとSagasを使用して認証アプリケーションを反応させる

21598 ワード
redux saga javascript react テキストリンク

概要


私がこのポストで行くつもりであるものはそうです:
  • Redux
  • Redux-Saga
    • 我々は我々のAuthアプリに取り組んでいる間、上記のポイントを訪問されます.
    Reduxが反応に関連しないという事実を確立しましょう.Reduxも角で使用することができます.それは完全に反応するReduxゲルを言った.それで、私はreduxとは何か質問に答えましょうか?
    単純なreduxを維持するには“アプリケーションの状態を管理するためのオープンソースのJavaScriptライブラリ”です.それはあなたが一貫して動作するアプリケーションを書くことができます.
    スパイスには、このAPIを使用しましょう.私は私のrepoにあるバックエンドAPIサービスを使用することができます.Authentication with Node READMEファイルで説明した手順に従ってサービスを実行するか、独自のJSON WebトークンベースAPIを使用できます.

    ショーを始めよう！



    ショーを開始するには、我々の反応アプリをステージにしている.そのためにはコマンドに従います.
    確認してくださいcreate-react-app インストール
    a)$ npm install -g create-react-appクリエイトアプリ
    b)$ npx create-react-app my-appディレクトリに移動マイアプリ
    c)$ cd my-app実行反応アプリ
    d)$ npm startすべての必須のpacakgesをインストールしましょう
    ・・・$ 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 これは、我々が不純物操作を管理するところです、すなわち、データフェッチのような非同期のもの
    ・・・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ミドルウェアを作成し、SagasをReduxストアに接続します

  • ストアの作成
    /*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 */
    • コンストストア=クレストストア
    インデックス
    ( AlphiMiddleware ( Sagamiddleware , routersmiddleware )
    )
    


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

+ To Start the Saga middleware



  ```javascript
  sagaMiddleware.run(IndexSagas)
    は、applyMiddleware フェーズ.
  • ではインデックスを表示しましょう.js
    •   ReactDOM.render(
    <Provider  store={store}>
      <Router  history={history}>
        <App  />
      </Router>
    </Provider>,
    document.getElementById('root')
  );
  registerServiceWorker();
    だからここで我々は店を提供し、それをストアを取得する反応アプリを提供して<Provider store={store}>2 )今に入りましょうindex-reducer.js
     ```javascript 
 import { combineReducers } from  'redux'
 import { reducer  as  form } from  'redux-form'

 const  IndexReducer  =  combineReducers({
        form
 })
 export  default  IndexReducer
 ```
    The combineReducers ヘルパー関数は、値が異なる機能を持つオブジェクトを、createStore3 )index-saga.js
    import { all } from  'redux-saga/effects';
export  default  function*  IndexSaga() {
yield  all([ ]);
}
    4)今では還元剤のインデックス、佐賀とメインインデックスを行っているApp.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;
    ここアプリでは<Main /> 我々のルートが存在するところ
    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>
        );
    }
}
    掘りましょう.Switch <Switch> それは排他的にルートをレンダリングするユニークです.対照的に、あらゆる<Route> その場所にマッチします.
    を表示/非表示のパスワードをトグルでフックフック
    UnityとF#で機械学習② 行列分解 (QR分解と特異値分解）