Redux学习日志（一）
Redux学习日志（一）
Redux中文文档：http://www.redux.org.cn/
阮一峰的网络学习日志：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
Redux是js的状态容器，提供可预测化状态管理
Redux除了和React一起用之外还支持 其他界面库
他体积小（2KB）而且没有任何依赖
什么时候使用
当UI层十分简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性
- 用户的使用方式十分简单
- 用户之间没有写作
- 不需要与服务器大量交互，也没有使用websocket
- 视图层（view）只是从单一的来源获取数据
以上这些情况不需要使用
- 用户使用方式复杂
- 不同的身份有不同的适用方式（会员 普通用户）
- 多个用户之间可协作（聊天室）
- 与服务器大量交互，使用websocket
- view要从多个来源获取数据
以上这些情况可以使用
如果应用不复杂可以不用
redux的设计思想
一 web应用是一个状态机，视图与状态一一对应
二 所有的状态，都保存在一个对象里
基本概念和API
store
store是保存数据的地方，整个应用只能有一个store
createStore函数可用来生成store
/*引入Redux*/
import { createStore } from "redux"
const store=createStore(fn)state
store对象包含所有的数据，如果想要得到某个时间点的数据，就要对store生成快照，这种时点的集合就叫做state
/*引入Redux*/
import { createStore } from "redux";
const store=createStore(fn)
const state=store.getState();一个state对应一个view
action
state的变换带动view的变化。但是用户接触不到state，用户接触到的是view层，当view层发生变化，会发出action，也就是说action是view发出的通知，表示state应该要产生变化
action是一个对象，其中type属性是必须的，表示action的名称，其他属性可自由设置，
const action={
type:"TODO", //action的名字
payload:"Rexux" //携带的信息是字符串 "Redxux"
}action描述当前发生的事情，改变state是唯一的办法，就是使用action，他会把数据运送到store
action creator
view要发送多少种信息，就会有多少种action，如果都手写，比较的麻烦，可以定义一个函数来生成action，这个函数就是action creater
const ADD_TODO="添加 TODO"；
function addtodo（params）{
return {
type：ADD_TODO,
params
}
}
const action=addtodo("learn redux")addtodo函数就是一个 Action Creator
store.dispatch()
store.dispatch()是view发出action的唯一方法
import { createStore } from "redux";
const store=createStore(fn);
store.dispatch({
type:"ADD_TODO",
payload:"learn redux"
})结合以上的addTodo函数，可简写成
store.dispatch(addTodo("learn Redux"))Reducer
store收到action之后，必须给出一个新的state，这样view才会发生变化，这种计算过程就叫做Reducer
Reducer是一个函数，他接受action和当前的state作为参数，返回新的state，
const reducer=function(state,action){
//
return new_state
}
这是一个例子
const defaultState=0;
const reducer=(state=defaultState,action)=>{
switch(action.type){
case "ADD":
return state+store.payload;
default:
return state;
}
}
//
const state=reducer(1,{
type:"ADD",
payload:2
})
//输出3但在实际的应用中，并不会手动的调用Readucer，store.dispatch方法会触发Readucer的自动执行。为此，store、需要知道Readucer函数，所以需要在生成store的时候，将Readucer传入createStore方法
import { createStore } from "redux"
const store=createStore(reducer);
//createStore接收Reducerr作为参数，以后每当store.dispatch发送过来一个新的action，就会自动调用Readucer，得到新的State。纯函数
Reducer函数最重要的特征，他是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出
纯函数是函数式编程的概念，必须遵守一下一些约束，
函数式编程：函数是一等公民
- 不得改写参数
- 不能调用系统I/O的API
- 不能调用Math.random或Data.now，因为每次得到的值不相同
store.subscribe()
store允许使用store.subscribe方法设置监听函数，一旦state发生变化，就会自动执行这个函数
import {createStore} from "redux";
const store=createStore(reducer)
store.subscribe(listener)只要把view的更新函数放入listen，就会实现view的自动渲染
store.subscribe方法返回一个函数，调用这个函数可以解除监听
let unsubscribe=store.subscribe(()=>{
console.log(store.getState)
})Store提供了三个方法
+ store.getState()
+ store.dispatch()
+ store.subscribe()在引入redux的时候
import { createStore } from "redux";
let { subscribe,dispatch,getState } = createStore(reducer)createStore可以接受第二个参数
let store=createStore(fn,window.STATE_FROM_SERVER)window.STATE_FROM_SERVER就是整个应用的初始值，如果提供这个参数，他会覆盖Reducer函数的初始默认值
createStore方法的实现
const createStore=(reducer)=>{
let state;
let listeners=[];
const getState=()=>state;
//dispatch是view发出的action的唯一方法
const dispatch=(action)=>{
state=reducer(state,action);
listeners.foreach(listener=>listener())
};
const subscripbe=(listener)=>{
listeners.push(listener);
return ()=>{
listeners=listeners.filter(1=>1!listener);
}
};
dispatch({});
return {getState,dsipatch,subscribe};
}Reducer的拆分
Reducer可生成State，整个应用只有一个State对象，包含所有的数据，当State十分庞大的时候，Reducer函数也十分庞大。
例如
const chatReducer=(state=defaultState,action={})=>{
const {type,payload}=action;
switch (type){
case ADD_CHAT:
return Object.assign({},state,{
chatLog:state.chatLog.concat(payloiad)
});
case CHANGE_STATUS:
return Object.assign({},state,{
statusMessage:payload
});
case CHANGE_USERNAME:
return Object.assign({},state,{
userName:payload
});
default:return state;
}
}以上代码中三种action分别改变state的三个属性
- ADD_CHAT：chatlog属性
- CHANGE_STATUS:statusMessage属性
- CHANGE_USENAME：userName属性
Reducer提供combineReducer方法，用于Reducer的拆分
import {combineReducers} from "redux";
const chatReducer=combineReducer({
chatLog:chatLog,
userName:userName
})这段代码的意思是combineReducer方法将三个Reducer合并成一个大的函数；