Redux
1腻惠、簡介與入門
快速開始
npm install --save redux
import { createStore } from 'redux';
let Store = createStore(reducer, preloadedState, enhancer);
export default Store
使用場景
一些變量需要在全局創(chuàng)建衷恭，并可以在項目任何地方使用它腾夯；那就用redux吧。redux提供了一套針對全局狀態(tài)（state）管理的解決方案价脾。
基本概念
Store
整個應用只能有一個 Store牧抵。Store可以作為調用redux api 的實例化對象.
State
Store 對象中所有數(shù)據(jù)存儲在這里。
Action
Action 只一個對象彼棍。但必須有type屬性（類似于key灭忠，供給dispatch調用）。 改變 State 的唯一辦法就是dispatch(Action)
Reducer
Reducer 是一個純函數(shù)函數(shù)[1]座硕，它接受 Action 和當前 State 作為參數(shù)弛作，返回一個新的 State。
enhancer
enhancer 一個高階函數(shù)[2]华匾，接受一個函數(shù) 形參和createStore相同映琳，在函數(shù)內部可修改或新增store中的方法或屬性。
核心api
- redux.createStore(fn) //獲取store
- store.getState() //獲取state
- store.dispatch(Action) //更改state蜘拉，改變 state 的惟一方法是 dispatch action
- store.subscribe(fn) //監(jiān)聽state變化
創(chuàng)建一個redux
/**
* @param {Function} reducer // 接收兩個參數(shù)萨西，分別是當前的 state 和要處理的 action，返回新的 state 旭旭。
* @param {any} preloadedState //state初始值的狀態(tài)谎脯。注意，如果提供了這個參數(shù)持寄，它會覆蓋 Reducer 函數(shù)的默認初始值
* @param {Function} enhancer //一個高階函數(shù) 用于給store增加一些自定義方法和屬性源梭，也可改寫原store方法
*/
const preloadedState= {num:100}
import { createStore } from 'redux';
let Store = createStore(reducer, [preloadedState], enhancer);
定義reducer
// state 相當于 vuex中的state對象 形參數(shù)默認值為state初始值
function reducer(state = {}, action) {
switch (action.type) {
case 'INCREMENT': //類似于vuex中的 action 方法名
state.num+=1
return state; //類似于vuex中的 mutations 執(zhí)行代碼塊【與vuex不同的是這里沒有展示mutations方法名 也不可以單獨調用mutations】
case 'DECREMENT':
state.num-=1
return {...state};
default:
return state;
}
}
定義enhancer
const enhancer = createStore => (reducer, preloadedState, enhancer) => {
let store = createStore(reducer, preloadedState, enhancer)
function dispatch(action) {
console.log(`dispatch an action: ${JSON.stringify(action)}`);
const res = store.dispatch(action);
const newState = store.getState();
console.log(`current state: ${JSON.stringify(newState)}`);
return res;
}
function myFun() {
const state = store.getState();
return (state + 'label');
}
store.myFun = myFun
return { ...store, dispatch }
}
監(jiān)聽/解除監(jiān)聽 State
// 添加監(jiān)聽 subscribe 返回一個函數(shù)用于解除監(jiān)聽
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);
// 解除監(jiān)聽
unsubscribe();
使用combineReducers對reducer函數(shù)進行拆分
通過組合式reducer分講state拆分，獨立管理各自的State
let preloadedState ={}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text])
default:
return state
}
}
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
let cReducers = combineReducers({
todos,
counter
})
let Store = createStore(cReducers, preloadedState, enhancer);
-
?純函數(shù)【概念】：
1稍味、返回結果只依賴于它的參數(shù)废麻。
2、并且在執(zhí)行過程里面沒有副作用(副作用：簡單理解為不改變外部變量模庐，或調用其他非純函數(shù))烛愧。
注意 reducer 是純函數(shù)。它僅僅用于計算下一個 state掂碱。它應該是完全可預測的：多次傳入相同的輸入必須產(chǎn)生相同的輸出怜姿。它不應做有副作用的操作，如 API 調用或路由跳轉顶吮。這些應該在 dispatch action 前發(fā)生社牲。 -
?高階組件【概念】：
1、接受一個或多個函數(shù)作為參數(shù) 如arr.map arr.reduce
2悴了、或return 返回另外一個函數(shù)
