Redux Observable에 대한 간단한 설명입니다.

소개

link to all the code in one page .

프런트 엔드 개발자로서 저는 Redux, 작동 방식 및 redux-saga 을 사용한 비동기 작업 처리 방법에 대해 잘 알고 있습니다.

그러나 새 작업에서는 redux-observable 을 사용합니다. 나는 그것이 흥미롭다는 것을 알았고, 내 친구가 묻기 때문에 Redux와 함께 작동하는 방법에 대한 간략한 설명이 있습니다.

참고: 나는 당신이 Redux 전문 용어(action creators, reducers, store)와 React에 익숙하다고 가정합니다.

Observable을 사용한 단방향 데이터 흐름.

마법은 다음 순서로 발생합니다.

상점에서 매핑된 소품으로 구성 요소가 렌더링됩니다.

일부 이벤트에 의해 작업이 트리거됩니다. 이는 DOM 이벤트 또는 수명 주기 메서드, 즉 componentWillMount() 일 수 있습니다.

작업이 reducer로 필터링됩니다. 동시에 어떤 에픽은 어떤 행동을 듣고 그에 따라 행동한다. 여기서 비동기 마법이 발생합니다. 서사시 내에서 필요한 경우 새 작업을 발송할 수 있습니다.

리듀서는 새 상태 반환을 반영합니다.

다음은 빠른 다이어그램입니다.


코드에서 어떻게 보이는지. redux-ducks 패턴에 따라 모든 것을 같은 파일에 넣겠습니다.

// module/index.js
// Actions
...
// Reducer
...

// Action Creators
...

// Epics
const createEpic = action$ => {
 action$.ofType(FETCH_LIST_SUCCESS)
    .mergeMap(action =>
      ajax.getJSON(`${baseurl}/list`)
        .map(res => fetchUserSuccess(res.data))
    );
}; 

서사적 논리와 모듈이 순서대로 있습니다. 다음 단계는 루트 리듀서와 에픽에 추가하는 것입니다.

import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import list, { fetchListEpic } from './lists';

export const rootEpic = combineEpics(
  fetchUserEpic,
  // ...
);

export const rootReducer = combineReducers({
  // ...
  list,
});

결국 redux-observable는 비동기 작업 및 부작용을 처리하는 데 사용하는 일부 미들웨어일 뿐입니다. 마지막 단계는 configureStore.js 에 추가하는 것입니다.

import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './modules';

const epicMiddleware = createEpicMiddleware(rootEpic);

export default function configureStore() {
  const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
  );


  return store;
}

놓친 경우 여기 link to all the code in one page이 있습니다.

그게 전부입니다.