原生js实现redux中getState,subscribe,listener,dispatch函数

最新推荐文章于 2022-03-21 00:31:24 发布

chi1130

最新推荐文章于 2022-03-21 00:31:24 发布

阅读量666

点赞数

分类专栏： js 文章标签： reactjs javascript html5

本文链接：https://blog.csdn.net/chi1130/article/details/104599065

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

原生代码

<!DOCTYPE html>
<html lang="en">
  <!-- 原生js实现dispatch 函数 -->

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="title">标题</div>
    <div id="content">内容</div>
    <script>
      var render = function(state) {
        document.getElementById('title').innerHTML = state.title;
        document.getElementById('content').innerHTML = state.content;
      };
      // 自定义一个dispatch过程
      var appReducer = function(state, action) {
        // 返回默认的state
        if (!state) {
          return {
            title: '初始化title',
            content: '初始化content',
          };
        }
        //返回相应的state
        switch (action.type) {
          case 'CHANGE_TITLE':
            // state修改
            return {
              ...state,
              title: action.newTitle,
            };
          default:
            return state;
        }
      };
      // 希望调用createStore就返回一个store
      // 纯函数 传入什么返回什么
      var createStore = function(reducer) {
        var state = null;
        // 监听者们
        var listeners = [];
        var dispatch = function(action) {
          //
          state = reducer(state, action); // reducer返回新的state
          listeners.forEach(listener => listener());
        };
        dispatch({});
        getState = function() {
          return state;
        };
        // 订阅
        var subscribe = function(listener) {
          listeners.push(listener);
        };
        return {
          subscribe,
          dispatch,
          getState,
        };
      };
      // store 包含subscribe,dispatch,getState
      var store = createStore(appReducer);

      store.subscribe(function() {
        render(store.getState());
      });
      store.subscribe(function() {
        console.log(store.getState());
      });
      store.dispatch({
        type: 'CHANGE_TITLE',
        newTitle: 'this is new title',
      });
      render(store.getState());
    </script>
  </body>
</html>

chi1130

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现redux中getState,subscribe,listener,dispatch函数

原生代码<!DOCTYPE html><html lang="en">  <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫