要说今年市面上最火的前端框架,那肯定就是react啦,但其实说白了,react其实最多只能算是一个view层的框架,因为它轻,用它来实现一些界面是非常快的,而且还很容易上手, 但是,如果前端就只是做一
要说今年市面上最火的前端框架,那肯定就是react啦,但其实说白了,react其实最多只能算是一个view层的框架,因为它轻,用它来实现一些界面是非常快的,而且还很容易上手,
但是,如果前端就只是做一些界面,那就只能沦落为---切图仔,而你的薪资就永远只是个切图仔,
那么问题来了,怎样才能不算是一个单纯的切图仔呢?
答案很简单,就是进阶!!! 那么react的进阶在哪里呢? 就是redux
如果说react算是MVC中的 V, 那么redux就是M,C ---model,controller
ok,介绍完了redux的重要性,接下来就是 GET STARTED
redux是由flux演变而来的,但是收到Elm的启发,避开了Flux的复杂性,当然啦,不管你有没有用过这些,问题其实都不大,如果有兴趣的话,也可以去研究一下,
首先来安装
npm install redux --save大多数情况下,我们都是跟react在一起用的,所以还会用到一些依赖包
npm install --save react-reduxnpm install --save-dev redux-devtools那么redux究竟是个虾米玩意儿呢?
应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，你需要编写 reducers。这是来自于官方文档的一段介绍,
其实就是把应用中所有的state都存储在一起,然后由action来触发去改变state.
import { createStore } from 'redux';/** * 这是一个 reducer，形式为 (state, action) => state 的纯函数。 * 描述了 action 如何把 state 转变成下一个 state。 * * state 的形式取决于你，可以是基本类型、数组、对象、 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是 * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。 * * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper) * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。 */function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; }}// 创建 Redux store 来存放应用的状态。// API 是 { subscribe, dispatch, getState }。let store = createStore(counter);// 可以手动订阅更新，也可以事件绑定到视图层。store.subscribe(() => console.log(store.getState()));// 改变内部 state 惟一方法是 dispatch 一个 action。// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行store.dispatch({ type: 'INCREMENT' });// 1store.dispatch({ type: 'INCREMENT' });// 2store.dispatch({ type: 'DECREMENT' });// 1就像这样,上面的内容就是一个很简单的计数器 ,
代码上就是这么简单,那么我来说一下我的理解
redux把整个app中的state来统一管理,因为它只有一个store和一个根级的reducer函数,就像react只有一个React应用和一个根级的组件,
随着应用的不断壮大,可以吧reducer拆分成多个小的reducers,分别独立管理state树,而不需要再添加store
说了这么多,其实有点就在于整个项目的可维护性,健壮性这些更高了,的确是一个很有意思的东西,哈哈
