资讯专栏INFORMATION COLUMN

Redux入门0x104: Action Creators

sydMobile / 2902人阅读

摘要:就为我带来了一种应用状态管理的新思想,其间充斥着许多个概念,等,乍一看头大,等到仔细理解了它的思想,或许就很简单了,也是其中一种。

0x000 概述

写长文章有点累啊,偶尔写点短的文章吧

0x001 概念

其实很多框架在技术上没有太大的难度,真正难的是思想,思想的突破远远比技术突破难多了。redux就为我带来了一种应用状态管理的新思想,其间充斥着许多个概念,statereduce等,乍一看头大,等到仔细理解了它的思想,或许就很简单了,Action Creators也是其中一种。

0x002 栗子

看看前面我们是怎么使用redux的:

import {createStore} from "redux"
function counter(state = 0, action) {
    switch (action.type) {
        case "INCREMENT":
            return state + 1
        default:
            return state
    }
}

let store = createStore(counter)

store.subscribe(() => {
    console.log(store.getState())
})

store.dispatch({type: "INCREMENT"})

我们使用store.dispatch({type: "INCREMENT"})发出了一个action,但是这种方式实在是太不优雅了,存在两个问题:

容易产生重复代码,特别是复杂的action

使用字符串作为type容易出错,重构也不易(200个地方使用了INCREMENT,有一天突然要修改,那就gg了)

对于第二个问题,解决很简单,使用常量就好了

const ACTION_INCREMENT="INCREMENT"
store.dispatch({type: ACTION_INCREMENT})

第一个问题,也很简单,使用函数分装起来就好了

const increment = () => {
    return {
        type: ACTION_INCREMENT
    }
}

store.dispatch(increment())

这个封装起来的函数就是Action Creator了,这种做法就是用函数封装了一下而已。但是在维护性上却有很大提升:

不需要重复的写{....},防止大的aciton写到吐

动态变化时候隐藏细节,异步action、数据拼装...

const increment = (step) => {
    return {
        type: ACTION_INCREMENT,
        step:step
    }
}

store.dispatch(increment(5))
0x003 总结

在学习一个东西了时候,可以通过实践来理解概念,纯粹的概念很让人头疼啊。

0x004 资源

源码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97873.html

相关文章

  • Router入门0x201: 从 URL 到 SPA

    摘要:的全称是统一资源定位符英文,可以这么说,是一种标准,而网址则是符合标准的一种实现而已。渲染器,将组件渲染到页面上。 0x000 概述 从这一章开始就进入路由章节了,并不直接从如何使用react-route来讲,而是从路由的概念和实现来讲,达到知道路由的本质,而不是只知道如何使用react-route库的目的,毕竟react-route只是一个库,是路由的一个实现而已,而不是路由本身。 ...

    honmaple 评论0 收藏0
  • 【React进阶系列】手写redux api

    摘要:每个接受的和函数作为命名参数,并返回一个函数。调用链中最后一个会接受真实的的方法作为参数,并借此结束调用链。 简介: 手写实现redux基础api createStore( )和store相关方法 api回顾: createStore(reducer, [preloadedState], enhancer) 创建一个 Redux store 来以存放应用中所有的 state reduc...

    Elle 评论0 收藏0
  • 【React进阶系列】手写实现react-redux api

    简介:简单实现react-redux基础api react-redux api回顾 把store放在context里,所有子组件可以直接拿到store数据 使组件层级中的 connect() 方法都能够获得 Redux store 根组件应该嵌套在 中 ReactDOM.render( , rootEl ) ReactDOM.render( ...

    刘玉平 评论0 收藏0
  • redux 源码分析,实现一个迷你的redux

    摘要:实现一个先不考虑中间件,实现一个简洁的实现是最主要的一个了,通过可以创建一个用来存放应用中所有的,一个应用只能有一个。方法是用来把每一个用方法包裹一下,因为可能只是返回一个具有属性的对象,只有用执行才有意义。正好可以利用的特性实现这个效果。 实现一个redux 先不考虑中间件,实现一个简洁的redux 实现createStore createStore是redux最主要的一个API了,...

    Ashin 评论0 收藏0
  • Redux 初见

    摘要:函数的作用是,返回一个最终的函数,做的事情是得到一个由多个不同函数作为可以自定义的对象。把数据放到一个对象列表中,每个数据用作为主键。不同类型的对象通过引用数据,这样数据发生改变的时候,只需要修改一处地方,减少数据冗余或者混用。 Redux初见 本文记录的是自己对redux的学习和理解,希望可以简洁易懂,入门redux,一步步的走进redux! Redux是什么 Redux是Java...

    trigkit4 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<