do 一下来了一个 redux - 巴中市万纵网络科技有限公司
雷竞技推荐码raybet网投雷竞技平台风控有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站
  • 网站首页
  • 公司简介
  • 产品展示
  • 新闻中心
  • 常见问题
  • 联系我们
  • 产品目录

    联系方式

    联系人:业务部
    电话: 00126-83979
    邮箱:service@q235cwfgg.com

    当前位置:首页 >> 产品展示 >> 默认分类 >> 正文

    do 一下来了一个 redux

    详细信息:

    导语

    一开看 redux 的时候还是比较蒙的,感觉比较绕,但是又好像是那么回事,接触一个新概念的时候可能都是如此,多去接触就熟悉了,今天就来分享下 redux 的三大核心为什么就能如此神奇的施展魔法,干撸完源码,真的就有种拨开云雾见日出的感觉

    开整

    我们再来稍微温习下 redux 的工作原理。垫吧垫吧,要不然容易晕。redux 是为了实现数据共享,那么任何一个组件都会得到所有的状态,而且组件也不可能只用自己的状态,如果组件只用自己自己的状态,那么就不需要 redux 了,一切就如此简单明了。store 作为一个状态树,来对状态进行管理。通过它的 getState 可以对 state 进行读操作,action 发布命令对状态进行写(类似于产品提需求)。这是所有组件都要遵守的约定,因为 redux 让所有状态都共享,所以说,读可以让你读,不严格要求,但是写操作,只能通过 action 修改 state (执行相应的 reducer ),这样才能保证数据的安全性。而对于组件来说,你只要 dispatch 一个 action 就好了。就是如此方便。好了,逻辑都明白了,接下来分析下内部机制就有基础了。

    一探store

    分清state

    一般我们的 redux 都是配合 react 使用,但是 react 和 redux 只是合作关系,并没有血缘关系。因此,自然 react 中的state也和 redux 中的 state 不是一回事了, react 中的 state 是组件内部自己的状态信息,而 redux 中的 state 是 redux 自己的数据。 react 配合 redux 使用的时候, react 就会拿 redux 里面的 state。既然如此我们在新建一个 redux ,在 redux 下目录结构如下:

    首先我们把要共享的数据放在 state 里面

    export const state = {
     head: {
     text: "我是头部",
     color: 'red'
     },
     body: {
     text: "我是body",
     color: "green"
     }
    }
    复制代码

    这样我们就把要共享的数据设置好了,待会我们只要把这个文件暴露的接口引入就能使用这里面的数据了。

    构建createStoreAPI

    我们为了把我们刚才构建的 state 也放到待会我们要用构建的这个 createStoreAPI 创建的的对象里面去,我们需要这个函数接受两个参数,一个就是我们创建的最初数据状态,另一个是修改函数。于是我们的 createStorage.js 代码如下:

    export const createStore = (state,storeChange) => {
     const store = state || {};
     const dispatch = (action) => {
     storeChange(store,action);
     }
     return { store,dispatch }
    }
    复制代码

    这段代码的设计思想是,当我们在创建一个 store 对象时,我们可以把后台提供的原始数据放入到 store 这个对象中,然后再暴露一个 dispatch 方法来修改 state。按照规则,要修改共享的状态,必须通过 dispath 方法,然后接收一个 action,他会调用 reducer 函数来真正执行改变。这样的就相当于通过 store 把 action 和 reducer 连接起来了。一个差不多的 createStoreAPI 就创建完了

    构建storeChangeAPI

    在 createStorage 里面,我们已经把组件修改 state,交给了 dispatch(action) ,当我们组件使用修改方法的的时候,就可以 dispatch 了,为何要 dispatch,因为 dispatch 是写的一个名词,分配管理改操作,就像我们要加工资要填申请一样。那这样就更加明朗了。毫无疑问,我们的 storeChange 肯定就是一个 reducer 函数了,于是 storeChange.js 代码如下:

    export const storeChange = (state,action) => {
     switch(action.type) {
     case 'HEAD_COLOR':
     state.head.color = action.color
     break;
     case 'BODY_TEXT':
     state.body.text = action.text
     break;
     default: 
     return state;
     }
    }
    复制代码

    工欲善其事,必先利其器。现在要用的武器都打造好了,自然就哟使用起来了,在 index.js 下代码如下

    import { state } from './redux/state.js'
    import { storeChange } from './redux/storeChange'
    import { createStore } from './redux/createStorage'
    const { store ,dispatch } =createStore(state, storeChange)
    function renderHead (state) {
     const head = document.getElementById('head');
     head.innerText = state.text;
     head.color = state.color;
    }
    function renderBody(state) {
     const head = document.getElementById('body');
     head.innerText = state.text;
     head.color = state.color;
    }
    function renderApp(state) {
     renderHead(state.head)
     renderBody(state.body)
    }
    renderApp(store)
    dispatch({type: 'BODY_TEXY',text: '我是经过dispath修改的body'})
    renderApp(store)
    复制代码

    创建 rederAPP 函数分别渲染 head 和 body 当我们需要改变 state 的时候就 dispatch 一下 action,当我们修改完了,要页面重新渲染下,页面就发生了改变了。这就是一个简易的 redux 了 这就是最终的效果:

    结束语

    本来想在本文继续把 context 这个大佬请出来的,但是感觉篇幅会很长,而且刚好时间也比较尴尬,所以今天的分享就先到这,context 下次分享了。自己并没有很牛逼,所以分享的东西可能会比较基础一些,但是我个人感觉挺通俗易懂的。但是编程路上,且行且珍惜,我会慢慢提高我的文章质量,分享更多心得。觉得不错的朋友可以支持一波,谢谢大家。