1 redux認(rèn)識(shí)
Redux 由 Flux 演變而來(lái)惦界，但受 Elm的啟發(fā)挑格，避開(kāi)了 Flux 的復(fù)雜性。 不管你有沒(méi)有使用過(guò)它們沾歪，只需幾分鐘就能上手 Redux。（這里就不需要理解Flux）
Redux 是react多交互雾消，多數(shù)據(jù)源的狀態(tài)管理器灾搏。Redux是普通對(duì)象描述應(yīng)用時(shí)的狀態(tài),狀態(tài)的操作。
redux的三大原則：
- 單一數(shù)據(jù)源：整個(gè)應(yīng)用的state北存儲(chǔ)在一顆object tree 中立润，并且整個(gè)object tree 只存在于唯一一個(gè)store 中狂窑。
- state 是只讀的：唯一改變state的方法就是出發(fā)action，action是一個(gè)用于描述已發(fā)生的事件的普通對(duì)象桑腮。
- 使用純函數(shù)來(lái)執(zhí)行修改：為了描述action如何改變state tree泉哈，你需要編寫(xiě) reducers
2.我們通過(guò)一個(gè)小示列來(lái)認(rèn)識(shí)redux
import React from 'react';
import ReactDom from 'react-dom';
import { createStore } from 'redux';
const reducer = (state={sum:0}, action)=>{
switch(action.type){
case 'INCREMENT':
state.sum = state.sum + action.value;
return state;
case 'DECREMENT':
state.sum = state.sum - action.value;
return state;
default: return state;
}
}
const store = createStore(reducer);
function render(){
const state = store.getState();
function increment(){
store.dispatch({type:'INCREMENT',value:1});
}
function decrement(){
store.dispatch({type:'DECREMENT',value:2});
}
ReactDom.render(
<div>
<div>{ state.sum }</div>
<input type="button" value="+" onClick={increment}/>
<input type="button" value="-" onClick={decrement}/>
</div>, document.getElementById('app'));
}
render();
store.subscribe(render); 復(fù)制代碼
redux基本概念和api
-
store :store就是保存數(shù)據(jù)的地方，可以理解為一個(gè)容器破讨，整個(gè)應(yīng)用只能有一個(gè)store
import { createStore } from 'redux'; const store = createStore(func)復(fù)制代碼store 對(duì)象由redux的createStore方法執(zhí)行函數(shù)創(chuàng)建
2. state： state 對(duì)象包含所有的數(shù)據(jù)丛晦，redux規(guī)定一個(gè) state對(duì)應(yīng)一個(gè)view。
import { createStore } from 'redux';
const store = createStore(func)
const state = store.getState();復(fù)制代碼
3.action: 觸發(fā)state對(duì)象數(shù)據(jù)發(fā)生改變提陶，action是一個(gè)對(duì)象烫沙，其中屬性type是必須的，表示action的名稱(chēng)隙笆。
const action = {
type:'INCREMENT', value:1
}復(fù)制代碼
4.store.dispatch: 是想視圖發(fā)出action的唯一方法
import { createStore } from 'redux';
const store = createStore(func);
const action = {
type:'INCREMENT', value:1
}
store.dispatch(action);復(fù)制代碼
5.subscribe：store.subscribe 可以監(jiān)聽(tīng)dispatch發(fā)出去的數(shù)據(jù)锌蓄，一旦state發(fā)生變化，執(zhí)行執(zhí)行該函數(shù)撑柔。
import { createStore } from 'redux';
const store = createStore(func);
store.subscribe(()=>{});復(fù)制代碼
6.reducer: store.disopatch執(zhí)行action后必須返回一個(gè)新的state瘸爽，視圖才會(huì)更新，整個(gè)過(guò)程叫reducer铅忿。reducer是一個(gè)函數(shù)剪决，接受state，action作為參數(shù)辆沦，返回新的state昼捍。
const reducer = (state={sum:0}, action)=>{
switch(action.type){
case 'INCREMENT':
state.sum = state.sum + action.value;
return state;
case 'DECREMENT':
state.sum = state.sum - action.value;
return state;
default: return state;
}
}
const store = createStore(reducer);復(fù)制代碼
實(shí)際開(kāi)發(fā)中，對(duì)象只能包含一個(gè)state肢扯，redux提供了combineReducers的方法用戶(hù)組合reducer
const cat = (state={}, action) => {
return Object.assign({}, state);
}
const dog = (state={}, action) => {
return Object.assign({}, state)
}
let reducers = combineReducers({cat, dog});
const store = createStore(reducers);復(fù)制代碼
以上即為redux的一個(gè)基本認(rèn)識(shí)和操作妒茬，當(dāng)然這只是一個(gè)最基本的認(rèn)識(shí)和使用，下篇我們來(lái)是使用react-redux蔚晨，react-thunk等這些封裝好的包來(lái)進(jìn)一步學(xué)習(xí)redux乍钻。
