Redux學習總結一

參考阮一峰部落格：redux教程

web應用是乙個狀態機，檢視與狀態是一一對應的。

所有狀態都儲存在乙個物件裡面。

store是儲存資料的地方，可以將其看成乙個容器，整個應用只能有乙個store.

state是store物件的某個時點的資料集合，當前時刻的state可以通過store.getstate()得到。

state和view一一對應，action就是view發出的通知，表示state應該要發生變化了。

action是乙個物件，其中的type屬性是必須的，表示action的名稱。

注：改變state的唯一辦法就是使用action.

const add_todo = '新增 todo';

function
addtodo
(text) 
}const action = addtodo('learn redux');

import  from 'redux';

const store = createstore(fn);
store.dispatch();

const defaultstate = 0;

const
reducer = (state = defaultstate, action) => 
};const state = reducer(1, );

注：實際應用中，store.dispatch方法會觸發reducer的自動執行，因此createstore可接受reducer作為引數生成乙個新的store.

純函式是函式式程式設計的概念，必須遵守以下約束：

1. 不得改寫引數

2. 不能呼叫系統i/o的api
3. 不能呼叫date.now()或者math.random()等不純的方法，因為每次都會得到不一樣的結果

注：reducer函式裡面不能改變state,必須返回乙個全新的物件。

// state 是乙個物件

function
reducer
(state, action) , state, );
// 或者
return ;
}// state 是乙個陣列
function
reducer
(state, action)

//將view的更新函式放入listen可以實現view的自動渲染

import  from 'redux';
const store = createstore(reducer);
store.subscribe(listener);
方法返回乙個函式，呼叫這個函式就可以解除當前listener監聽
let unsubscribe = store.subscribe(() =>
console.log(store.getstate())
);unsubscribe
();

import  from

'redux';
let  = createstore(reducer);

注：createstore方法還接受第二個引數，表示state的最初狀態，它會覆蓋reducer函式的預設初始值。

//createstore方法的簡單實現

const
createstore = (reducer) => ;
const
subscribe = (listener) => 
};dispatch({});
return ;
};

import  from 'redux';

const chatreducer = combinereducers()
export

注：state屬性名必須與子reducer同名，combinereducers()函式會根據state的key去執行相應的子reducer,並將返回結果合併成乙個大的state物件。

//combinereducer的簡單實現

const combinereducers = reducers=> , action) => ,
{} );
};};

store.dispatch(action);state一旦發生變化，store會呼叫監聽函式.

store.subscribe(listener);listener通過store.getstate()得到當前狀態，若用react,則會觸發重新渲染view.

function

listerner
()

功能：為計數器新增遞增和遞減的action,並將引數value的值顯示在網頁上，store的監聽函式設定為render,每次state的變化都會導致網頁重新渲染。

const

counter = () => (  +
-);const
reducer = (state = 0, action) => 
};const store = createstore(reducer);
const
render = () => )}
ondecrement=)}
/>,
document.getelementbyid('root')
);};render();
store.subscribe(render);

Redux學習總結二

參考阮一峰redux教程 新增日誌功能 let next store.dispatch store.dispatch function dispatchandlog action 中介軟體就是乙個函式，對store.dispatch方法進行改造，在發出action和執行reducer這兩步之間，新增...

Redux學習日誌（一）

redux中文文件 阮一峰的網路學習日誌 redux是js的狀態容器，提供可 化狀態管理 redux除了和react一起用之外還支援 其他介面庫 他體積小 2kb 而且沒有任何依賴 當ui層十分簡單，沒有很多互動，redux就是不必要的，用了反而增加複雜性 以上這些情況不需要使用 以上這些情況可以使...

Redux原始碼學習篇 一 redux實現

本文會逐步探索redux到應用分為3個系列 redux 實現 react redux 實現 redux中介軟體的應用與實現 案例場景 現在有乙個計數器，或者點讚場景 現在用redux如何記錄呢?import from redux action const like like const unlike...