Redux入门0x104: Action Creators

sydMobile 发布于2019-08-23 12:02 / 2916人阅读

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

0x000 概述

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

0x001 概念

其实很多框架在技术上没有太大的难度，真正难的是思想，思想的突破远远比技术突破难多了。redux就为我带来了一种应用状态管理的新思想，其间充斥着许多个概念，state、reduce等，乍一看头大，等到仔细理解了它的思想，或许就很简单了，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 资源

源码

云服务器 GPU云服务器 Creators Redux redux源码 redux-saga

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

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

Router入门0x201: 从 URL 到 SPA

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

honmaple 2019-08-26 12:20 评论0 收藏0
【React进阶系列】手写redux api

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

Elle 2019-08-23 12:25 评论0 收藏0
【React进阶系列】手写实现react-redux api

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

刘玉平 2019-08-23 12:28 评论0 收藏0
redux 源码分析，实现一个迷你的redux

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

Ashin 2019-08-26 13:37 评论0 收藏0
Redux 初见

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

trigkit4 2019-08-20 10:23 评论0 收藏0