来到新公司快2个月了,这是本月第一篇也是最后一篇博客…
- redux-observable和redux的使用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253An Epic is the core primitive of redux-observable.It is a function which takes a stream of actions and returns a stream of actions. <b>Actions in</b>, actions out.const { createStore, applyMiddleWare } = redux;const { ofType, createEpicMiddleware } = ReduxObservable;const { filter, maoTo, delay } = rxjs.operators;const PING = 'PING';const PONG = 'PONG';const pingEpic = action$ => action$.pipe(ofType(PING),delay(1000),mapTo(PONG))const pingReducer = (state = { isPinging: false }, action) => {switch (action.type) {case 'PING':return { isPinging: true };case 'PONG':return { isPinging: false };default:return state;}};const epicMiddleWare = createEpicMiddleware();const store = createStore(pingReducer, applyMiddleWare(epicMiddleWare));epicMiddleWare.run(pingEpic)const renderApp = () => {const { isPinging } = store.getState();document.body.innerHTML = `<div><h1>is pinging: ${isPinging}</h1><buttononclick="(${() => {store.dispatch(ping());}})();">Start PING</button></div>`;};store.subscribe(renderApp);renderApp();
其实看完代码很简单,这个东西是会拦截到视图层dispatch的action的,如果这个action在reducer里面是存在的就会先走reducer再走epic,
如果没有找到就会直接走epic,然后派发出一个新的action
- 一个更加real的example12345678910111213141516171819202122232425262728const FETCH_USER = 'FETCH_USER';const FETCH_USER_FULFILLED = 'FETCH_USER_FULFILLED';const fetchUser = username => ({ type: FETCH_USER, payload: username });const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload });const fetchUserEpic = action$ => action$.pipe(ofType(FETCH_USER),mergeMap(action =>ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(map(response => fetchUserFulfilled(response)))));const users = (state = {}, action) => {switch (action.type) {case FETCH_USER_FULFILLED:return {...state,// `login` is the username[action.payload.login]: action.payload};default:return state;}};
其实也没什么,就是通过dispatch action到epic,然后走网络请求,把结果存到reducer里让页面取数据,我司现在
就是这种模式
- 再来看一个例子123456789101112131415161718192021222324252627282930313233const INCREMENT = 'INCREMENT';const INCREMENT_IF_ODD = 'INCREMENT_IF_ODD';const increment = () => ({ type: INCREMENT });const incrementIfOdd = () => ({ type: INCREMENT_IF_ODD });// 注意这里的state$ 其实是一个observable 需要通过state$.valueconst incrementIfOddEpic = (action$, state$) => action$.pipe(ofType(INCREMENT_IF_ODD),filter(() => {return state$.value.counter % 2 === 1}),map(() => increment()));const counter = (state = 0, action) => {switch (action.type) {case INCREMENT:return state + 1;default:return state;}};import { combineEpics } from 'redux-observable';// 跟reducer一样 可以combineconst rootEpic = combineEpics(pingEpic,fetchUserEpic);epicMiddleWare.run(rootEpic)
关于redux-observable的内容就讲到这里
- 电脑快没电了, 下面就讲最后一个吧123456static getDerivedStateFromProps(props: any, state: any) {console.log(state);if (props.color != state.prevColor)return {color: props.color, prevColor: props.color}return null;}
getDerivedStateFromProps在每次props改变和state改变时触发,需要注意的是在该周期内需要进行判断因为setState
完了后会进入该周期, 不然你会发现state的值并没有变化
附上一段代码
这是为了取代某个方法