继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

张培跃
关注TA
已关注
手记 23
粉丝 30
获赞 98

如何打造可复用的视图组件一直是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方法修改如下:

// 第一个参数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;
    }
}

通过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就是什么!

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP