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

React loves you —“洞悉Redux装的逼”

花满楼的小前端a
关注TA
已关注
手记 42
粉丝 111
获赞 2213

你若装逼,请带我飞!

从前,从前,听说React只负责UI,话说写Angular代码就像写后端,现在看来,React赢在情怀上了;

我认为没必要老是拿React和Angular做比较,Angular是一套大而全的相对完备的框架;而React确实是只负责UI,只是多出很多概念层的东西,需要自己以此去构造;React更像是打造一个由React作为主线的生态;以component为基础,虚拟DOM解决性能瓶颈,单向数据流统一管理components,webpack、ES6、JSX完美融合,还有Flux、Redux等架构方案及其周边扩展,加上React Native;说好的只负责UI呢,这是通吃的节奏啊!这是一条情怀路线,击中了很多前端人长期以来对Web探索的痛点:Web Components;所以才能振臂一呼,应者云集;而当你真正开始走进React,你会发现,正如老罗所说:“漂亮的不像实力派!”;

实在是机缘巧合,之前的博客有一篇《富文本编辑器小记 — 关于撤销、重做操作》,是关于简单的canvas操作和富文本编辑器里自定义撤销重做的方法,现在发现LOW爆了,因为Redux的文档中就有一个关于撤销重做的实例;算是被Redux教做人了,所以正式决定要开始Redux了;话说Redux对于一般不是那么复杂的有很多状态管理的地方并不是必须的,本来state和props可以好好的玩耍,现在半路杀出了个Redux,并全权掌控了state,这么高逼格,请带我飞吧!

不要问Redux是什么。。。就是那个将要全权代管你所有组件state的那家伙!用Redux的自述来说就是:

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

如果你之前不懂Redux,那么看到这句话,你可能依然很平静,或是脑子开始打转,有些似懂非懂,甚至有点迷惑,唉,其实就是依然不懂嘛!

既然state从此是路人,那么咱就得安心的开始写action和reducer了,一起走进Redux;

Redux提供的是一套机制,所以并不太容易一下子接受,话说React从开始到现在有太多不太容易一下子接受的地方了,关键是都是很有逼格的玩意,所以要想飞的更高,就该把地平线忘掉!Redux 是 JavaScript 状态容器也叫Store,它是由所有组件state组成的一个对象树,也可以把它看作一个大的JSON,或是一个属于前端的小数据库,不再操作state,而是对这个大的JSON进行增删改查;只是操作方式由Redux提供;

1、action和actionCreator

action是Store数据的来源,本身就是一个普通的js对象,type字段是必须的,指明干了什么;不同业务类型的action可以各自单独存放,actionCreator函数仅返回一个action,由dispatch(action)调用来更新state;

// action type:datas
export const ADD='ADD';
export const DEL='DEL';

// action creator:datas
export function addOne(data){
    return {
        type:ADD,
        payload:data
    }
}
export function delOne(ins){
    return {
        type:DEL,
        index:ins
    }
}

如上,声明了两个action的type:ADD和DEL;两个actionCreator:addOne和delOne,分别返回一个action;

2、reducer

action只是指明干了什么,reducer则指明该怎么干什么;

// reducer
import {ADD,DEL} from './actions';
const initDatasState={datas:[],length:0};
export function datasJson(state=initDatasState,action){
    switch (action.type) {
        case ADD:
        return {datas:[...state.datas,action.payload],length:state.length+1};
        case DEL:
        if (state.length<=0) {
            return state;
        }
        state.datas.forEach((a,i)=>{
            i==action.index&&state.datas.splice(i,1);
        });
        return {datas:state.datas,length:state.length-1};
        default:
        return state;
    }
}

reducer是一个纯函数,接收旧state和action,返回新state;

(previousState,action)=>newState;

reducer可以拆分为多个,最后由combineReducers合并;

import {combineReducers} from 'redux';
//reducer1
function reducer1(initState,action){
    //return newState
}
function reducer2(initState,action){
    //return newState
}
export default combineReducers({reducer1:reducer1,reducer2:reducer2});

3、连接Redux

引入Redux后,你的App.js可能该这么写了:

import React from 'react';
import {connect} from 'react-redux';
import {addOne,delOne} from './actions';

class App extends React.Component{
    render(){
        return (
            <div>
                <input type="button" onClick={this.props.onAdd} value="addOneItem"/><br/>
                length:<b>{this.props.length}</b>;datas:<i>{this.props.value}</i><br/>
                <input type="button" onClick={this.props.onDel} value="delFirst"/>
                {this.props.children}
            </div>
        );
    }
}

function mapStateToProps(state){
    return {
        value:JSON.stringify(state.datas),
        length:state.length
    }
}
function mapDispatchToProps(dispatch){
    return {
        onAdd:()=>{
            let data={id:Math.round(Math.random()*10),text:Math.round(Math.random()*1000000000).toString(16)};
            dispatch(addOne(data));
        },
        onDel:()=>{
            dispatch(delOne(0));
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

如今state已全部交由Redux代管了:mapStateToProps将state绑定映射为props;mapDispatchToProps将修改state的操作映射为props,connect来连接该组件与Redux;既然state都聚集到了Store里,那么映射后的props的取值和修改将都指向Store,这个由Provider解决;

4、Provider

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducers} from './reducers';
import App from './app';

const Store=createStore(reducers);
console.log(Store.getState());
ReactDOM.render(
    <Provider store={Store}>
        <App>
            <Inpt />
        </App>
    </Provider>,
    document.getElementById('views')
);

现在Provider作为最外层容器并绑定Store的值,这样,里面的组件中映射成为props的state就都能取到值了;至此,就基本将Redux引进来了;可能把这个简单的增删datas的玩意,用Angular和JQuery都是几行代码的事,而到了这里却要几十行代码,又混进来了一堆概念,而Redux并不仅仅就这些,像Middleware、高阶函数什么的在往后的探索中将再一次刷新你的眼界;我只想说,你咋不上天呢!但是,就这高逼格,哈哈,请带我飞吧!

如果你已在路上,就勇敢的向前吧!

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

热门评论

写的不错,代码提供的很好,更容易理解

头都晕的,这么复杂........

console.log('牛逼')


查看全部评论