剧场模式
首页前端ReduxRedux 入门教程(React 进阶)

Redux 入门教程 #12 中间件

海外散仙厉飞雨 · 化神发布于
6

https://redux.js.org/api-reference/createstore

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { Provider } from 'react-redux';

const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};

const error = store => next => action => {
  try {
    next(action)
  } catch(e) {
    console.log('error ' + e);
  }
};

// const logger = function(store) {
//   return function(next) {
//     return function(action) {
//       console.log('dispatching', action);
//       let result = next(action);
//       console.log('next state', store.getState());
//       return result;
//     }
//   }
// }

const store = createStore(rootReducer, {}, applyMiddleware(logger, error));

// store.subscribe(() => console.log("State updated!", store.getState()));

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

registerServiceWorker();

reducers/counter.js

const counter = (state = 1, action = {}) => {
  switch(action.type) {
    case 'INCREMENT':
      throw new Error('error in INCREMENT')
      // return state + 1;
    case 'DECREMENT':
      return state - 1;
    default: return state;
  }
}

export default counter;

5 条回复
  • MuYu · 合体
    MuYu · 合体 #1

    这里其实是有很多疑问没有解开的。
    applyMiddleware() 背后是有函数组合的思想的。
    中间件的写法为什么会是 store => next => action 的这种写法,这背后是函数柯里化的思想
    说到函数柯里化和函数组合,就不的不说到函数式编程的思想了

  • 想卖咖啡的程序员 · 元婴

    👍

  • xll · 道祖
    xll · 道祖 #3

    let next=store.dispatch;
    store.dispatch=(action)=>{}

  • netNowork · 大乘
    netNowork · 大乘 #4

    系统日志提示

  • netNowork · 大乘
    netNowork · 大乘 #5

    next () 应该怎么样理解 那块 逻辑有点不好理解

小程序(beta)
随机课程
React & Immutable 前端性能卡顿优化

React & Immutable 前端性能卡顿优化

0 个视频0 分钟高级

全部免费

前端React还未更新新课程

学员
YJeremy · 真仙野蛮人 · 元婴jhshen · 道祖木 头 · 元婴River- · 大乘nickiwen · 真仙Sandro · 真仙xll · 道祖highcker · 太乙ldc · 真仙阳光才是真美 · 合体Hichank · 太乙newclear · 大乘吐槽电视机 · 道祖Joshua-Tu · 练虚bthulu · 元婴zbx7858 · 道祖Sine · 合体邻家小妹 · 元婴frank · 真仙FG · 元婴   1234 · 大乘** · 元婴Leo · 元婴Jean · 真仙生活~ · 合体mfkyddh · 金仙名字改了 · 合体React-小白 · 合体JesusCracker · 太乙wjfc · 太乙yupd · 真仙柠檬GDM · 元婴很俗的草,啃吧 · 元婴damofan · 大罗阿震 · 真仙qwas3110 · 大罗徐正宾 · 元婴JiaojSun · 练虚yuxuefendou · 元婴congzi2019 · 大乘黄彪 · 元婴angus · 合体尹迪 · 合体朱雪松 · 合体yaoyf · 合体hanruiying · 道祖pameladuke · 真仙chloris · 太乙LeoDo · 太乙Demons · 合体chrisliume · 太乙swip · 合体TaiheChen · 合体lqp336699 · 真仙ping · 元婴| · 合体AganCN · 元婴guxiaobai · 道祖supergczh · 道祖第五季 · 元婴yhuyo · 道祖star · 练虚安之若素 · 元婴smile · 真仙章伟 · 合体helloword_xy · 合体hello101 · 元婴Google · 练虚Matthew · 道祖Chosen · 元婴冀宇航 · 真仙周乐 · 真仙457341620 · 大乘jianglinhub · 大乘不死鸟 · 合体Hardcore0331 · 元婴韦威 · 真仙wangzhe123 · 大罗miaozilong · 合体ccc147256 · 太乙netNowork · 大乘思进 · 大乘magic · 大罗常亮 · 合体SkyFishT · 合体TX · 元婴背包客 · 合体vaga756 · 合体FastTurbo · 道祖wutihou · 元婴jasmineamber · 合体xiao_ran · 太乙caspertu · 真仙Ethan · 元婴sisliy · 合体summer_Day · 元婴ttswh2009 · 太乙shishihou · 道祖吴盛威 · 真仙啊邱 · 元婴super · 大乘17706511375 · 真仙zhenxingQ · 真仙KumoIs · 合体wasd6631456 · 大乘woshimaxiaorui · 真仙timorTm · 金仙bobcyd212 · 道祖crystal0579 · 太乙cometjun · 道祖l617388617 · 合体00Jane · 合体太阳花 · 元婴z2131023 · 大乘开心就好 · 合体RocketWill · 合体迪 · 元婴baozaomiaomiao · 合体iosLongFeng · 金仙satos · 合体3dzzh · 元婴liunian1993 · 合体justinelong · 合体masteralva · 合体lbb · 合体Super-Ps · 合体zhuofan · 大罗wsxiaotongtong · 合体xuezh · 大罗Messi-Q · 元婴zengrui · 练虚Fish-Fan · 合体sishenguodong · 合体hungeroxc · 道祖fanguomao · 元婴samuelshang · 太乙zc3130902 · 大罗dannyking630 · 真仙yinyue123 · 元婴libin · 大乘
最新动态
YJeremy · 真仙学习到了9:24
野蛮人 · 元婴学习到了8:50
jhshen · 道祖学习到了9:30
木 头 · 元婴学习到了1:16
River- · 大乘学习到了9:30

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:106

Top