剧场模式
首页前端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;

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

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

  • 求知小风 · 元婴

    👍

  • xll · 道祖
    xll · 道祖 #3

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

  • netNowork · 太乙
    netNowork · 太乙 #4

    系统日志提示

  • netNowork · 太乙
    netNowork · 太乙 #5

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

  • 郭宇铭 · 真仙
    郭宇铭 · 真仙 #6

    return result 是多余的,感觉是洋葱圈模型

  • 招财加菲猫 · 大罗

    感觉应该不是 const error 和logger 都是有赋值 并且在applyMiddleWare 里面做了传参

官方服务号
随机课程
轻松学 nodejs - 基础篇

轻松学 nodejs - 基础篇

18 个视频1 小时 44 分钟入门

全部免费

Nodejs已完结

学员(207)
theShy · 道祖思航💗 · 大乘骑龙 · 道祖caizhuo · 练虚招财加菲猫 · 大罗zhufellx · 真仙lcy · 大乘钮乾坤 · 大乘金麒麟 · 道祖tr77229591 · 大罗+ != 0 != - · 大乘luanwu · 真仙
最新动态
theShy · 道祖学习到了9:21
思航💗 · 大乘学习到了0:20
骑龙 · 道祖学习到了9:30
caizhuo · 练虚学习到了8:17
招财加菲猫 · 大罗学习到了9:25
统计信息
    学员: 17811
    视频数量: 1049
    帖子数量: 428

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:117

Top