react -redux(thunk) case #1

12458 ワード

ステータス管理をredux-thunkでfetchを取得し、storeでmetadataを管理するように変更してみます.
💡この位置決めはアヒルのスタイルでコードを記述します.

middleware

1.ミドルウェアとは?

ミドルウェアとは、タスクがディスパッチされる前に予め定義されたタスクを設定する空間を指す.
💡簡単に理解してみましょう.中衛はアクションとヘビー級ボクサーの間の仲介者です.

2.ミドルウェアの作成

const loggerMiddleware = store => next => action => {
    /* 미들웨어 내용 */
}

次はstoreその役割はdispatchに似ています.
💡 差異

next(action)を行う場合は、直ちにReducerに渡してください.または、ミドルウェアがある場合は、次のミドルウェア処理を続行してください.

store.dispatchの場合、動作は最初から再派遣されるため、ミドルウェアを再処理する必要があります.

運転

動作

運転

ミドルウェア

nextで以下のミドルウェア

を実行する.

Reduserを実行する

では、一度中衛になりましょう.
ミドルウェア

const loggerMiddleware = store => next => action => {
    // 현재 스토어 상태값 기록
    console.log('현재 상태', store.getState());
    // 액션 기록
    console.log('액션', action);

    // 액션을 다음 미들웨어, 혹은 리듀서로 넘김
    const result = next(action);

    // 액션 처리 후의 스토어 상태 기록
    console.log('다음 상태', store.getState());
    console.log('\n'); // 기록 구분을 위한 비어있는 줄 프린트

    return result; // 여기서 반환하는 값은 store.dispatch(ACTION_TYPE) 했을때의 결과로 설정됩니다
}

export default loggerMiddleware; // 불러와서 사용 할 수 있도록 내보내줍니다.

3.ミドルウェアの適用

storeの作成時にミドルウェアを設定します.
redixモジュールのapplyMiddlewareを使用して設定します.

import { createStore, applyMiddleware } from 'redux';
import modules from './modules';
import loggerMiddleware from './lib/loggerMiddleware';

// 미들웨어가 여러개인경우에는 파라미터로 여러개를 전달해주면 됩니다. 예: applyMiddleware(a,b,c)
// 미들웨어의 순서는 여기서 전달한 파라미터의 순서대로 지정됩니다.
const store = createStore(modules, applyMiddleware(loggerMiddleware))

export default store;

4. redux-thunk

reduceを使用するアプリケーションで非同期タスクを処理するためのミドルウェア!
オブジェクトの代わりにアクション作成関数を作成できます.
デフォルトでは、アクションオブジェクトが派遣されます.

const actionCreator = (payload) => ({action: 'ACTION', payload});

アクションを数秒後に実行するか、現在の状態で無視したい場合は、通常のアクション作成者は使用できません.しかし、redux-thunkはこれを行うことができます!
#case 1

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

// action 함수
function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

// thunk 함수
function incrementAsync() {
  return dispatch => { // dispatch 를 파라미터로 가지는 함수를 리턴합니다.
    setTimeout(() => {
      // 1 초뒤 dispatch 합니다
      dispatch(increment());
    }, 1000);
  };
}

このようにthunk関数を記述すると、後でstoreします.dispatch(incrementAsync());実行すると、INSREMENT COUNTERアクションが1秒後に派遣されます!
#case 2


// thunk 함수
function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}