专栏首页张培跃React归纳笔记:快速上手Redux之一初识

React归纳笔记:快速上手Redux之一初识

如何打造可复用的视图组件一直是React所关注的。但如果你要开发一个大型的web应用的话,只使用React是一件非常痛苦的事情。因为单是解决组件之间的数据传递与状态管理就够你喝一壶的了!在此向各位力荐一类库——Redux,它可以帮助我们更加高效、清晰地对应用和组件的状态进行管理!

Redux介绍

随着单页面应用的需求越来越复杂,你所需要管理的状态也越来越多。这里所说的状态即是数据,它不仅仅包括从服务器获取的数据,还包括本地所创建的数据,以及反映UI状态的数据。

Redux通过一系列约定的合理规范将修改应用的步骤标准化,集中化,使其不再错综复杂,变的更加清晰与可爱。

用官网一句话来介绍Redux:Redux是一个可预测化的JavaScript状态管理容器。

翻译成人话就是说:Redux是一个用于存放JavaScript状态的容器,只要你将状态放到该容器中,你编写的程序将会行为一致且易于测试!总之是很牛就对了。


Redux的主要组成有三部分:action 、reducer、store。

Redux配置

我们通过create-react-app快速搭建一个Redux环境。

1、创建my-app应用:

create-react-app zhangpeiyue

2、安装redux

cnpm install redux --save

进入到项目中,打开src文件夹,将除了index.js以外的所有文件全部删除!自此整个世界都安静了!

store(存储状态的仓库)

打开index.js,将代码全部干掉!然后写入以下代码:

// 引入createStore方法
import {createStore} from "redux";

// 初始化数据状态
const initState={
    userName:"ZhangPeiYue",
    age:16
}

// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为,后面再做介绍
const reducer = function(state=initState,action){
    return state;
}

// 通过createStore方法创建store
const store=createStore(reducer);
// 通过store的getState方法取得状态
const myState=store.getState();
console.log(myState.userName)// ZhangPeiYue
console.log(myState.age)// 16

解释代码:

1、state是应用的状态,而store指的是状态仓库。你也可以理解为是store是应用状态state的管理者。

2、state与store的关系:state=store.getState()。

3、store是通过调用Redux的createStore获得的。

4、reducer是一个同步函数,负责更新并返回一个新的state。

注意:store是单一数据源,只能有一个Store

Action(动作)

到目前为止,我们只是创建了一个store,并在store内存放了state,最后通过store.getState()得到了state。其它的什么也没有做。如果我们要添加或修改属性怎么办?

按照Redux规定,我们不能够直接修改state。也就是说,下面的行为是不允许的:
let myState=store.getState();
myState.userName="LaoWang";

若要操作state,只能通过dispatch方法来派发一个action,这才是唯一的正途!

action其实是一个包含type(强制要求)属性的普通对象,这个type是我们判断用户行为的关键。

现在,我们将reducer方法修改如下:

const reducer = function(state=initState,action){
    // 后续可能会有多个action,所以此处建议使用switch对type进行判断
    switch(action.type){
        case "ADD_TO_STATE":
            return Object.assign(state,{
                sex:"男"
            })
        default:
            return state;
    }
}

通过dispatch来派发一个action:

store.dispatch({    
type:"ADD_TO_STATE"
});

查看下当前仓库状态:

const myState=store.getState();
console.log(myState.sex);// 男

通过以上对程序的调整,成功为状态增加了一个值为男的sex属性。

完整代码:

// 引入createStore方法
import {createStore} from "redux";

// 初始化数据状态
const initState={
    userName:"ZhangPeiYue",
    age:16
}

// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为,后面再做介绍
const reducer = function(state=initState,action){
    // 后续可能会有多个action,所以此处建议使用switch对type进行判断
    switch(action.type){
        case "ADD_TO_STATE":
            return Object.assign(state,{
                sex:"男"
            })
        default:
            return state;
    }
}
// 通过createStore方法创建store
const store=createStore(reducer);
store.dispatch({
    type:"ADD_TO_STATE"
});
const myState=store.getState();
console.log(myState.sex);// 男

小结:

1、dispatch是store下的方法。

2、dispatch派发action后,最终会执行到reducer函数

3、在reducer内得到的第二个参数即是派发的action

4、根据action的type属性,来决定是否操作state


不过到目前为止,增加的属性固定为男,如果要想通过action来控制其值的话,我们可以对reducer方法进行修改:

const reducer = function(state=initState,action){
    // 后续可能会有多个action,所以此处建议使用switch对type进行判断
    switch(action.type){
        case "ADD_TO_STATE":
            return Object.assign(state,{
                sex:action.payload.sex
            })
        default:
            return state;
    }
}

对action进行修改:

store.dispatch({
    type:"ADD_TO_STATE",
    payload:{
        sex:"女"
    }
});

结果:

const myState=store.getState();
console.log(myState.sex);// 女

小结:action可以通过payload属性设置数据载体,从而实现数据传值。


不过,目前action所荷载的数据并不够灵活,如果我要想改变sex值的话还要将action再写一遍,比较麻烦。所以我们可以采用函数工厂模式,根据需求生产action:

function addToState(sex){
    return {
        type:"ADD_TO_STATE",
        payload:{
            sex
        }
    }
}

执行dispatch,查看结果:

store.dispatch(addToState("未知"));
const myState=store.getState();
console.log(myState.sex);// 未知

完整代码:

// 引入createStore方法
import {createStore} from "redux";

// 初始化数据状态
const initState={
    userName:"ZhangPeiYue",
    age:16
}

// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为,后面再做介绍
const reducer = function(state=initState,action){
    // 后续可能会有多个action,所以此处建议使用switch对type进行判断
    switch(action.type){
        case "ADD_TO_STATE":
            return Object.assign(state,{
                sex:action.payload.sex
            })
        default:
            return state;
    }
}
// 通过createStore方法创建store
const store=createStore(reducer);

function addToState(sex){
    return {
        type:"ADD_TO_STATE",
        payload:{
            sex
        }
    }
}
store.dispatch(addToState("未知"));
const myState=store.getState();
console.log(myState.sex);// 未知

小结:action本质上是一个由函数产生的具有type属性的普通对象。


到现我们对reducer函数应该已经不陌生了。但需要注意以下几点:

1、reducer必须要是同步的纯函数,接收state与action

2、用户每次dispatch(action)后,reducer都会触发执行

3、reducer必须要有返回值,否则state为undefined

4、最后返回的state值会完全替换掉原来的state。说的直白一些,reducer返回的是什么,state就是什么!

—————END—————

本文分享自微信公众号 - 张培跃(zhangpeiyue8)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript 闭包学习

    说到函数,就不可避免的涉及到作用域问题,JS中把变量作用域分为全局和局部,所有函数均可访问全局变量,局部变量在函数体内使用,其他函数不能调用,并且函数执行完成会...

    strawberry
  • ScrollView中嵌套listview时,打开界面时自动滑动到底部

    ScrollView中嵌套listview时,当listview自动加载时,会自动滑动到scrollview到底部。

    Xiaolei123
  • 风靡一时的精灵收藏原来实现起来so easy, 手把手教你亲手创建一个! | 干货

    说起口袋精灵、以太猫、MLB Crypto Baseball等游戏,你也许不陌生,这些宠物收藏及交易类游戏曾风靡一时。

    区块链大本营
  • 女友竟用TA集齐了雪橇三傻! Truffle这口狗粮干货值了…

    老铁们,今天营长手把手带你们开发一款去中心化应用(Dapp)—— 宠物商店,来来来,先看下效果图:

    区块链大本营
  • 12 个 JS 技巧

    在这篇文章中,将分享 12 个非常有用的 JavaScript 技巧,可以帮助你写出简洁且高性能的代码。

    grain先森
  • 0604-6.1.0-如何使用StreamSets实时采集指定数据目录文件并写入库Kudu

    Fayson在前面写过多篇StreamSets的文章,本篇文章主要介绍通过StreamSets实时的方式读取本地的数据文件,通过解析处理将文件中的内容写入到Ku...

    Fayson
  • 请求网页时,怎么给我返回了一段 JavaScript 代码

    如果你想要获取这个网站的源代码的话,必须要先获取一个 cookie,其字段名为:acw_sc__v2,你是不是不相信?爬取网站还需要获取 cookie 值才可以...

    sergiojune
  • 紫涵的Python小课堂---第一讲为什么是python

    我学习python纯粹是因为机缘巧合,大概是我大二的寒假快开学的时候,我没事干在网上搜游戏玩的时候无意之间发现了一个名叫极客战记的游戏,据他介绍是通过写代码来过...

    紫涵
  • 几行JavaScript代码构建计算机视觉程序,这里有6个js框架

    近年来,计算机视觉一直都是热门话题,造就了无数好的应用程序。得益于专门开发人员的努力,利用计算机视觉创建应用程序不再是难事。事实上,你可以用几行 JavaScr...

    机器之心
  • 关于浏览器渲染VM_ xxx.js的问题

    最近有一个站点涉及到改版的问题,由于时间仓促,有很多css和js 都是直接从合适的资源拿过来用的,这就比较容易导致js冲突和css错乱的问题,在...

    相柳

扫码关注云+社区

领取腾讯云代金券