网站交互界面,网站任务界面,lamp环境wordpress,wordpress opml回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的htmlredux.js的demo初识react(三)在 react中使用redux来实现简版计数器初识react(四) react中异步解决方案之 redux-saga初识react(五) 数据流终极解决方案 dva(零配置)前言 首先纠正个误区#xff0…回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的htmlredux.js的demo初识react(三)在 react中使用redux来实现简版计数器初识react(四) react中异步解决方案之 redux-saga初识react(五) 数据流终极解决方案 dva(零配置)前言 首先纠正个误区redux可以配合jq等框架使用并不单单局限于react。为了让所有人都看懂我们这里先只实现一个最简单版本的 htmlredux.js的使用。 为什么出现redux 随着单页面应用的复杂多个没有联系的组件之间想要共享状态(state)很困难Redux的出现解决了数据问题 redux三大原则 单一数据源 整个应用的state都被存储在一个仓库中我们称之为store,整个应用只能有一个store。只读的state 唯一改变state的方法就是dispatch(action)即派发动作。使用纯函数执行修改 为每个action用纯函数编写reducer来描述如何修改state 说了这么多看不懂?没关系就是有三个概念 state、reducer、action。下面我们一一讲解API 概念解析 1、store 仓库 redux提供了一个createStore函数用来生成storestore就是保存数据的地方可以看成一个容器。整个应用只能有一个storefunction createStore(reducer) { //将状态放到一个盒子里 别人改不了...
}
let store createStore(reducer)复制代码2、State 状态 store对象包含所有数据。如果想得到某个时点数据,就要对Store生成快照。这种时间点的数据集合就叫做State。 当前时刻的State可以通过store.getState()拿到。 let state store.getState()
复制代码3、action 动作 action必须是一个对象,type是必须的用户可以派发动作来改变state.let action {type:change_title_text,text:改变标题了
}
复制代码4、store.dispatch(action) 派发动作 store.dispatch()是发出action的唯一方法let store createStore(reducer);
store.dispatch(action) //action{type:change_title_text,text:改变标题了}
复制代码5、Reducer 管理员也可以称之为处理器 Store收到派发的动作后即dispatch(action)必须返回一个新的state这样视图才会变化。这种state的计算过程叫做Reducer是一个纯函数接受state和action作为参数返回一个新的statelet reducer function(state,action){return new_state;
}
复制代码 废话了这么多很庆幸把基本概念说完了终于来个实战来看看具体怎么工作的。我们做一个最简单计算器点击加1来看看redux怎么工作的 计数器实现步骤(redux) 1、声明一个初始化状态 let initState {number:0}
复制代码2、createStore 重点 创建仓库保存状态对外暴露当前状态getState 和如何更改状态的方法dispatchlet 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)。就可以赋默认值拉至于为什么往下看 3、reducer实现 管理员可以根据类型返回不同的状态let reducer(stateinitState,action) { //管理员,负责如何更改状态的switch (action.type) { //更改状态 要有一个新的状态覆盖掉case add:return {number:state.numberaction.count}}return state;
};
复制代码 好了到目前为止我们来梳理下思路 我们会这样调用 let store createStore(reducer),这其中发生了什么如何把初始状态赋值给state的步骤dispatch({}) reducer(initState,action)stateinitState4、渲染页面视图为初始状态 let store createStore(reducer);
function render() {let content document.querySelector(.content);content.innerHTML store.getState().getState().number;
}
render();
复制代码将页面视图与store中的state进行绑定。看效果 目前为止一切完美那我们怎么点击按钮改变状态只能通过store.dispatch()方法 5、点击改变视图 btn.onclick function () {store.dispatch({type:add,count:5});render()
}
复制代码 到目前为止一个最简单的redux应用算实现了其实redux还是比较简单的重点是理解它概念后续会讲解在react中如何使用redux redux全部源码解析可以参考我总结更多优质文章参考
