[笔记] React 如何使用 Redux-Observable：副线打怪一下(2)

为何要使用Redux-Observable?

首先，一开始我们都知道redux跟react搭配的很好，redux扮演着资料仓储的角色，但是许多的side effects却需要开发者自行解决，例如：非同步执行，套用一个netflix发表Redux-Observable时(Netflix JavaScript Talks-RxJS + Redux + React = Amazing!)所提到的例子，当使用者点选一部影片，却在影片载入完成前取消并点选了另一部影片时，这时除了刚刚已经发送的request外会在发送一条新的request，然而当前一个发送的request返还时，我们已经不需要那个request，所以必须对前一个request做出判断，是不是取消点选，是的话则不採用...等等的判断，这时Redux-Observable就非常适合运用在这种专案的处理上。
当然也有较容易使用的React-thunk及Redux-Saga，但是因为实习关係，公司採用Redux-Observable，所以我也跟进学习Redux-Observable，一探Redux-Observable的强大！
(但是我的练习中不会有如此複杂的判断，专案使用到的部分为发送request以及收到后对response的处理)

安装

step1 - 安装RxJs

npm install rxjs –save

RxJS 在JerryHong作者的文章里面就有提到Observable的许多Operator可以做使用，当需要用到其方法时，引入即可。
以下为例：

import { of } from 'rxjs/observable/of';import { from } from 'rxjs/observable/from';import { merge } from 'rxjs/observable/merge';import { empty } from 'rxjs/observable/empty';import { mergeMap } from 'rxjs/operators/mergeMap';

step2 - 安装redux-observable

npm install redux-observable –save

step3 - Epic函数

何谓Epic函数？

这边引用Taiming作者的解释来了解何谓Epic函数，并附上来源（网址）
根据官网的说明，Epics 是一个「 Actions in, actions out 」的函数，我们发送完action，在reducers接收到action之后，Epics函数才会监听并接收到action。
简单来说，action会在我们发送完之后，依序经过reducer以及Epics函数，而且因为Ecpis是action out，所以在Ecpis做完事情之后，可以再发送action回到reducer。
上述听起来有些绕口，但多将这段话多念几次再搭配上实作真的对Epic函数的理解有些许帮忙。

撰写程式码

create发送请求的action

/* actions/index.js *///发送 口罩资讯requestexport const fetchMaskInformation = () => {    return {        type: 'FETCH_MASK_INFORMATION',    }}

撰写epic函数

/* epics/index.js */import { empty } from 'rxjs';import { ajax } from 'rxjs/ajax';// 引入combineEpics方法import { combineEpics } from 'redux-observable';import { mergeMap, catchError } from 'rxjs/operators';const maskGetList = (action$) =>     action$.ofType('FETCH_MASK_INFORMATION').pipe(    mergeMap(action => {         return ajax.getJSON(`网址`).pipe(            mergeMap(response => {                console.log('res:',response);                return empty();            })        )    })  );// combineEpics会将参数中的epic函数合併在一起export default combineEpics(maskGetList);

step4 - 撰写configureStore

/* configureStore.js */// import负责创建store的函式createStoreimport { createStore, applyMiddleware } from 'redux';// 引入createEpicMiddlewareimport { createEpicMiddleware } from 'redux-observable';import Reducer from './reducers/index';import Epic from './epics/index';export default function configureStore() {    // createEpicMiddlewarec会将epic函数转为redux中间件    const epicMiddleware = createEpicMiddleware();    // https://github.com/zalmoxisus/redux-devtools-extension    // 将reducer传入以创建一个store    const store = createStore(        Reducer,        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(applyMiddleware(epicMiddleware)),      );    epicMiddleware.run(Epic);    return store;}

step5 - 在App.js引入configureStore

/* App.js */import configureStore from './configureStore';// Provider是react-redux中的组件，它会接收上方在Redux中创建的store，并根据和component绑在一起的需求单mapStateToProps上要求的资料从store中取出，再透过props流向component。import { Provider } from 'react-redux';const store = configureStore();// 将store传给送个每个component <Provider store={store}>    <div>        Hello World!    </div></Provider>

这样就可以顺利取得口罩的资讯啰！
如下图：

下回预告

下篇文章会纪录将所取得的口罩资讯呈现到画面上的过程～

先呈上 上礼拜刻了许久的口罩页面
过程中花了许多时间在熟悉Google Map Api的部分，也打算来写篇React使用Google Map Api的纪录XD
虽然没有赶上第十关的截止时间，但我还是要继续完成它 Fighting!!


介面设计：Penny Yang(网址)
是来在THE F2E活动中Penny Yang设计师所提供的设计稿来刻板的

问题与讨论

我也是前端的小菜鸟，所以要是有什么写得不好的地方，大师路过还请多给我一些指点，也请各位大师鞭小力点XD
如果你/妳已经是在前端上有一两年经验的，因本系列文章偏向前端入门，可能本系列文章不太适合你/妳，但也欢迎你/妳给予一些建议。