Skip to content

redux 状态库的使用,以及手写实现 redux,并且实现了其常用的中间件 redux-thunk、redux-logger、redux-promise

Notifications You must be signed in to change notification settings

YijiangWang/redux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

redux

  • React 应用最广的状态管理库:redux;其它的还有 mobx,市场相对 redux 较少一些。

  • redux 只是一个纯粹的状态管理库,默认只支持同步,实现异步任务(比如延迟、网络请求),需要中间件的支持,如常用的 redux-thunk、redux-logger。

  • redux 数据流向图 redux 数据流向图

redux 库的使用

  • 提供了三个重要 API:createStore、applyMiddleware 和 combineReducers;
createStore
  • const store = createStore(reducer);
  • 其中 reducer 只能是纯函数;
  • store 中,有几个主要的 API:dispatch、getState、subscribe;
dispatch
  • dispatch({type: 'ADD'});
  • 默认情况下,dispatch 只能接受一个 plain object;当传入 function 或者 promise 时,需要使用中间件,如何使用?在 applyMiddleware 中展示;
getState
  • store.getState()
  • 获取 store 中的所有状态信息;
subscribe
  • store.subscribe(()=> {this.forceUpdate()});
  • 订阅:当 store 中 state 发生变化时,需要告知组件进行更新;
  • 通常情况下,订阅和取消订阅都是成对出现的;
combineReducers
  • 当有多个 reducer 时,将其进行合并,然后传递给 createStore;
  • const store = createStore(combineReducers({count: counterReducer, num: numReducer}));
applyMiddleware
  • const store = createStore(combineReducers({count: counterReducer}), applyMiddle('thunk', 'promise', 'logger'));
  • 当 store.dispatch 接受的不是一个 action 时,就需要使用中间件进行协助处理;

手写 redux 源码,顺道实现了三个常用中间件

  • 手写实现 redux 中,基本实现了 redux 的所有常用功能,且全程无第三方框架,实现了纯手写所有代码;
  • 并且实现了常用中间件:redux-thunk、redux-logger、redux-promise。

项目结构

|-- public:资源文件
    |-- index.html
|-- src
    |-- index.js:入口文件
    |-- pages
        |-- ReduxPage:使用 redux 框架的组件
        |-- YJReduxPage:使用自定义 yj-redux 框架的组件(可以和 ReduxPage 比较,可以发现用法完全一致)
    |-- store
        |-- store:使用 redux 创建 store,并且引入三个中间件
        |-- yj-store:使用 yj-redux 创建 store(可以和 store 中的内容比较,用法完全一致)
    |-- yj-redux:手写实现 redux 功能,包含了 createStore、combineReducers、applyMiddleware
        |-- createStore:包含了 getState、dispatch、subscribe 功能
        |-- combineReducers
        |-- applyMiddleware
    |-- middlewares:手写用到的中间件
        |-- redux-thunk
        |-- redux-logger
        |-- redux-promise
    |-- utils:手写中间件时发现用到了第三方库,这里手写一下中间件中用到的第三方库
        |-- is-promise:判断是否是 promise

学习

  • 安装依赖:npm install;
  • 运行项目:yarn start
  • 底下就可以看到效果,可以进行学习、调试。

函数式编程

  • 函数式编程有两个最基本的运算:合成(compose)与柯里化(currying);
函数的合成
  • 如果一个值要经过多个函数,才能变成另外一个值,就可以把所有中间步骤合并成一个函数,这就叫做“函数的合成”;

  • 可以进行合成的函数必须要是一个“纯函数”,满足结合律:compose(f, compose(g, h)) 等同于 compose(compose(f, g), h);

  • 代码示例:

      // 合成之前: a -> c
      let b = fun1(a);
      let c = fun2(b);
    
      // 函数合成
      let compose = function(fun1, fun2) {
        return function(x) {
          return fun1(fun2(x));
        }
      }
  • 上代码:

      let f1 = (arg) => {
        console.log('f1', arg)
        return arg;
      }
      let f2 = (arg) => {
        console.log('f2', arg)
        return arg;
      }
      let f3 = (arg) => {
        console.log('f3', arg)
        return arg;
      }
      let f4 = (arg) => {
        console.log('f4', arg)
        return arg;
      }
      // 方法一:
      f1('perfect');
      f2('perfect');
      f3('perfect');
      f4('perfect');
      
      // 方法二:
      f4(f3(f2(f1('perfect'))));
      
      // 方法三:
      let res = compose(f1, f2, f3, f4)('perfect');
      console.log(res)
    
      function compose(...funcs) {
        if(funcs.length === 0) {
          return arg => arg;
        } else if(funcs.length === 1) {
          return funcs[0]
        } else {
          return funcs.reduce((a, b) => {
            return (arg) => b(a(arg));
          });
        }
      }
      // redux 中源码
      function compose(...funcs) {
        if (funcs.length === 0) {
          return (arg) => arg
        }
    
        if (funcs.length === 1) {
          return funcs[0]
        }
    
        return funcs.reduce((a, b) => (...args) => a(b(...args)))
      }
函数柯里化
  • 概念:把一个多参数的函数,转化为单参数函数;
  • 上代码
    // 柯里化之前
    function add(x, y) {
      return x + y;
    }
    add(1, 2) // 3
    
    // 柯里化之后
    function addX(y) {
      return function (x) {
        return x + y;
      };
    }
    addX(2)(1) // 3

About

redux 状态库的使用,以及手写实现 redux,并且实现了其常用的中间件 redux-thunk、redux-logger、redux-promise

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published