1228-redux学习笔记(摘录) | WEB前端零基础课

今天的WEB零基础课的内容是Redux，它的思路比较“拧”，不怎么好理解，算是react里的一个难点。讲完之后，同学们纷纷表示没听懂，

这个东西只靠听，肯定是搞不懂的，还是要多写，通过多写去理解它的运行思路。

在我看来，redux的目的之一，就是把数据的传递从组件的层级上，剥离开。不使用redux时，组件的层级，其实是react数据的传递的通道。

要多写，否则没用。

<!-- 1228的redux学习笔记摘录 -->

redux [ri:'dʌks]，是reactJs的状态管理。

它就是用来专门的管理react的数据传递的。

reactJs它就是dom的一个抽象层，它不是一个完整的webApp应用的解决方案。

它有二个方面没有处理：

1，代码结构的管理；

2，组件之间的通信；

redux，它出现的原因，我个人主观认为是第二个。

<!-- -->

如果你的UI层、页面交互很简单，没有很多层的页面，那用不着redux，

否则会增加不必要的复杂性；

如果没有，多用户之间的协作、跟服务器大量的交互，那用不着

redux的适用场景：多交互，多数据源

<!-- -->

Redux的设计思想比较简单：

1，web应用的就是一个状态机，视图与状态是一一对应；

2，所有的状态，保存在一个大对象里。它也是一个单独的东西，一般是单独的js文件。

<!-- Redux，它的基本的api： -->

所有的状态，保存在一个大对象里。

它叫做：Store，

<!-- 创建一个Store，createStore() -->
import {createStore} from 'redux';
<!-- 返回新生成的一个Store对象 -->
const store = createStore(fn);
// fn，就是 reducers，
<!-- 获取初始状态：getState() -->

Store对象，它里面保存着当前应用的所有状态。

它里面的状态，State，

调用 getState()方法获取，

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
let state = store.getState(); //获取它里面的状态

<!-- Action -->

Action，它是view(视图)发出的通知，表现State要发生变化。

Action，

它里面是一个对象，里面是属性和值，type属性是必须的，是名称，

let action = {
 type : '名称，其实就是引用',
 具体事情的名称： '要做什么事'
}

<!-- dispatch -->

dispatch，是store的方法。store.dispatch()，

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
store.dispatch({
 type : '名称，其实就是引用',
 具体事情的名称： '要做什么事'
});

它接收一个action做为参数，发出Action

<!-- -->

Reducers [rɪ'dju:sə]

Reducers，它是一个“处理action要做的事情的地方”，

Reducers 收到state之后，要返回一个新的 state，

这个过程，叫做 Reducers [rɪ'dju:sə]

Reducers，是一个方法，接收二个参数：

1，action；2、当前的state

返回的是一个新的 state，

// 伪代码：

let defalutstate = 0;
let reducer = ( state = defalutstate, action ) => {
 switch ( action.type ){
 case 'add':
 return state + action.addNum
 case 'mins':
 return 减法的内容
 defalut:
 return state
 }
}
let state = reducer( 1,{
 type : 'add',
 addNum : 2
});
// 此伪代码的返回值，应该是3

返回的新的state，它的值是3

从这个伪代码可以看出，它的计算，脱离了父子组件的传递。

redux的目的之一，就是把数据的传递从组件的层级上，剥离开。

之前我们的写法，组件的层级，其实是react数据的传递的通道。

<!-- store.subscribe(libs) -->

它用来监听函数，一但state发生变化，就自动执行。

这是什么？观察者模式。

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
...
..
.
store.subscribe( ReactDOM.render(...) );

重新渲染页面。

<!-- -->

Redux的工作流程：

1、发出action

<!-- store.dispatch(action) -->

2、store自动调用 reducers，并传入二个参数，

-当前state

-收到的action,

它会返回新的state

3、state一但发生变化，就自动 调用 store.subscribe(listen);

4、listen要通过 getState()得到更新之后的state，

调用render，重新渲染页面。

<!-- -->

reactJs，它的思路跟 jquery 完全不同。

redux，它的思路，跟reactJs，不说完全不同，相差也很大。

<!-- -->

redux，不是reactJs自带的。需要通过npm安装，

npm install redux -save