初识react(二) 实现一个简版的html+redux.js的demo

时间 2019-11-24

标签 react 实现一个 html+redux.js html redux demo 栏目 React 繁體版

原文原文链接

回顾

前言

首先纠正个误区，redux能够配合jq等框架使用，并不仅仅局限于react。为了让全部人都看懂，咱们这里先只实现一个最简单版本的 html+redux.js的使用。html

为何出现redux

随着单页面应用的复杂，多个没有联系的组件之间想要共享状态(state)很困难，Redux的出现解决了数据问题 react

redux三大原则

单一数据源

整个应用的state都被存储在一个仓库中，咱们称之为store,整个应用只能有一个store。

只读的state

惟一改变state的方法就是dispatch(action)，即派发动做。

使用纯函数执行修改

为每一个action用纯函数编写reducer来描述如何修改state

说了这么多，看不懂?不要紧，就是有三个概念 state、reducer、action。下面咱们一一讲解APIgit

概念解析

一、store 仓库

redux提供了一个createStore函数，用来生成store
store就是保存数据的地方，能够当作一个容器。整个应用只能有一个store

function createStore(reducer) { //将状态放到一个盒子里 别人改不了
    ...
}
let store = createStore(reducer)

复制代码

二、State 状态

store对象包含全部数据。若是想获得某个时点数据,就要对Store生成快照。这种时间点的数据集合，就叫作State。当前时刻的State，能够经过store.getState()拿到。github

let state = store.getState()
复制代码

三、action 动做

action必须是一个对象,type是必须的，用户能够派发动做来改变state.

let action = {
    type:"change_title_text",
    text:"改变标题了"
}
复制代码

四、store.dispatch(action) 派发动做

store.dispatch()是发出action的惟一方法

let store = createStore(reducer);
store.dispatch(action)  //action=>{type:"change_title_text",text:"改变标题了"}
复制代码

五、Reducer 管理员，也能够称之为处理器

Store收到派发的动做后即dispatch(action)，必须返回一个新的state，这样视图才会变化。
这种state的计算过程叫作Reducer，是一个纯函数，接受state和action做为参数，返回一个新的state

let reducer = function(state,action){
    return new_state;
}
复制代码

废话了这么多，很庆幸把基本概念说完了，终于来个实战来看看具体怎么工做的。咱们作一个最简单计算器，点击加1，来看看redux怎么工做的redux

计数器实现步骤(redux)

一、声明一个初始化状态

let initState = {number:0}
复制代码

二、createStore 重点

建立仓库，保存状态，对外暴露当前状态=>getState 和如何更改状态的方法=>dispatch

let createStore=(reducer)=> { //将状态放到一个盒子里 别人改不了
    let state ;  //声明状态
    function dispatch(action) { //派发 参数是action动做,action是一个对象
       state= reducer(state,action); //调用写好的方法,这个方法会返回一个新的状态
    }
    dispatch({}); //内部须要先定义次
    let getState = ()=> JSON.parse(JSON.stringify(state)); //获取状态的方法 深拷贝
    return {
        getState,
        dispatch
    };
}

复制代码

须要知道 action是一个对象=>{type:"add",count:5}，类型为add,每次点击加5
在建立仓库的时候,会默认先调用,dispatch({})，给state赋值默认状态
对外暴露 getState方法,用户能够获取最新状态
对外暴露 dispatch方法，用户能够派发动做

当看不懂时,只要知道目的只有一个，就是在给state赋默认值。先dispatch({})=>reducer(state,action)。就能够赋默认值拉，至于为何，往下看bash

三、reducer实现

管理员，能够根据类型返回不一样的状态

let reducer=(state=initState,action)=> { //管理员,负责如何更改状态的
    switch (action.type) { //更改状态 要有一个新的状态覆盖掉
        case "add":
            return {number:state.number+action.count}
    }
    return state;
};
复制代码

好了，到目前为止，咱们来梳理下思路框架

咱们会这样调用 let store = createStore(reducer),这其中发生了什么，如何把初始状态赋值给state的
步骤dispatch({}) =>reducer(initState,action)=>state=initState

四、渲染页面视图为初始状态

let store = createStore(reducer);
function render() {
    let content = document.querySelector('.content');
    content.innerHTML = store.getState().getState().number;
}
render();
复制代码

将页面视图与store中的state进行绑定。看效果

目前为止，一切完美，那咱们怎么点击按钮改变状态，只能经过store.dispatch()方法异步

五、点击改变视图

btn.onclick = function () {
    store.dispatch({type:"add",count:5});
    render()
}
复制代码

到目前为止，一个最简单的redux应用算实现了，其实redux仍是比较简单的，重点是理解它概念，后续会讲解在react中如何使用redux函数