[Redux]Redux(3)-ミドルウェア、インスタントメッセージを使用して不変オブジェクトを管理

14265 ワード
redux テキストリンク
こんにちは.
これは中間部品の位置決めです.
ミドルウェアを使用すると、重複構成が必要な論理を簡単に作成できます.
Nodejsでexpressモジュールを使用してRestAPIサーバを作成した場合は、簡単に理解できます.リクエストがゴールに着く前に、ミドルウェアを通りました.
Reduxも同様に、動作が配布されると、Reducerに転送される前にミドルウェアが実行されます.

このミドルウェアを使用してreducerからの例外をサーバに送信したり、通常の臍帯値を変更したときにログを記録したりできます.

  • きほんこうぞう
    const Middleware = store => next => action => next(action);

  • きほんこうぞう
    • const Middleware = function(store) {
  return function(next) {
    return function (action) {
      return next(action)
    }
  }
}
    上記のコードと同様に、storeオブジェクトとactionオブジェクトを使用してミドルウェアを処理できるネスト関数です.
    storeの定数を呼び出すことで使用するか、actionオブジェクトのペイロードを使用することができます.

    ミドルウェアの設定

    import { createStore, applyMiddleware } from 'redux';
const middleware1 = store => next => action => {
   console.log('middleware start1');
   const result = next(action);
   console.log('mideleware end1');
   return result;
}
const middleware2 = store => next => action => {
   console.log('middleware start2');
   const result = next(action);
   console.log('mideleware end2');
   return result;
}
const Reducer = (state, action) => {
   console.log('reducer');
   return state;
}
const store = createStore(Reducer, applyMiddleware(middleware1, middleware2));
store.dispatch({type:'someAction'});
    applyMiddlewareを使用して、複数のミドルウェアを定義できます.
    createStore関数の2番目のパラメータとして使用します.

    結果

    middleware start1
middleware start2
reducer
middleware end1
middleware end2
    ミドルウェアを定義するときにreturn next(action)のようにすぐに返さずにresult変数にnext(action)が含まれている場合は、ミドルウェアが終了した後に実行されるコードを記述できます.
    したがって、各ミドルウェアはreduceを呼び出す前にコードを記述することができる.
    ミドルウェア1は、次のミドルウェア関数を実行する最初のミドルウェアです.ミドルウェア2のnext関数は、storeの既存のdispatchメソッドを呼び出す最後のミドルウェアである.

    immer


    immerは、不変オブジェクトの管理を支援するモジュールです.
    ステータスを不変オブジェクトとして管理する場合は、通常Spread Syntaxを使用します.

    immer : Documentation
    電話番号を直します.
  • 以下はSpreadSyntaxを使用するコードです.
    •     const obj = {
      name : 'junhyuk',
      info : {
        address : 'a b c d e f',
        phone : '010-0000-0000',
        family : {
           ...
        }
      }
    }
    const newObj = {
      ...obj, 
      info:{
        phone : '01000000000'
        ...obj.info,
        family: {
          ...obj.info.family
        }
      }
    }
    重ねた構造が少し深くなると複雑になります.
    immerを使用すると、可変オブジェクトを簡単に管理できます.
    コード
  • immerを使用
    import produce from 'immer';
const obj = {
    name : 'junhyuk',
    info : {
      address : 'a b c d e f',
      phone : '010-0000-0000',
      family : {
         ...
      }
    }
}
const newObj = produce(obj, draft=>{
    draft.info.phone = '01000000000'
})

    immerを使用したReducerの作成

    function reducer(state = INITIAL_STATE, action) {
   return produce (state, draft=> {
      switch (action.type) {
        case ADD:
          draft.todos.push(action.todo);
          break;
        case REMOVE_ALL;
          draft.todos = [];
          break;

          ...

        default:
         break;   
      }
   }) 
}
    productメソッドgaction.タイプに応じて異なるオブジェクトを返します.
    immerが使用されているため、pushメソッドを使用するとproductメソッドは新しいオブジェクトを返します.
    • [TIL] scss
    [AIFFEL] 3. ターミナルおよびデフォルトコマンド