<h1>瞭解redux</h1>
<p>瞭解幾個基本概念
1.Store
(1)Store:保存數據的地方，可以看成一個容器（倉庫），整個應用只能有Store
(2)Redux提供了CreateStore這個函數，用來生成Store。
import { createStore } from 'redux';
const store = createStore(fn);
(這裏的fn是一個函數，createStore是需要接收一個函數，生成Store對象)
2.State
(1)Store對象包含所有的數據,如果想得到某一個時點的數據，就要對Store生成快照。
這個時點的數據集合，就叫State。
(2)那麼如何獲取到State，通過Stote.getState()拿到。
(3)一個State對應一個View。只要State相同，View就相同，你知道State，就知道View是什麼樣。
import {createStore} from "redux";
const storeObj = createStore(fn);
const stateObj = storeObj.getState();
3.Action
(1)State的變化，會導致View的變化,但是用戶接觸不到State，只能接觸到View。
所以，State的變化必須是View導致的,Action就是View發出的通知，表示State應該要發生變化了
(2)Action是一個對象，其中type屬性是必須的，表示Action的名稱。其他的屬性可以自由設置
(3)Action 描述當前發生的事情，改變State的唯一的辦法，就是使用Action，它會運送數據到Store
const action = {
type: "ADD_TODO", // 名稱
payload: "Action例子" //攜帶的信息是字符串
}
4.Action Creator
(1)View要發送多少種消息，就會有多少種Action，如果手寫就會麻煩，可以定義一個函數生成Action，這個函數就叫Action Creator
const ADD_TODO = "添加TODO";
function addTodo(text){
return {
type: ADD_TODO,
text
}
}
const action = addTodo('xxxx'); //其實這裏的addTodo就是一個Action Creator。
5.store.dispatch()
(1)store.dispatch()是View發出Action的唯一方法。
(2)store.dispatch接收Action對象作爲參數，將他發送出去。
import {creatStore} from "redux";
const store = createStore(fn);
function addTodo(text){
return{
type: ADD_TODO,
text
}
}
store.dispatch(addTodo(xxxxx));
6.Reducer
(1)Store收到Action以後，必須給出一個新的State，這樣View纔會發生變化，這種State的計算過程就叫Reducer。
(2)Reducer 是一個函數，它接受Action和當前State作爲參數，返回一個新的State。
const Reducer = funtion(state, action){
return new_state;
}
(3)整個應用的初始狀態，可以作爲State的默認值,（這個沒有太明白）
const defaultState = 0;
const reducer = (state=default, action) => {
switch(action.type){
case 'ADD':
return state + action.payload;
default:
return state;
}
}
const state = reducer(1, {
type: 'ADD',
payload:2
})
(4)在實際的應用中，Reducer函數不用像上面這樣手動調用，store.dispatch方法會觸發Reducer的自動執行，
(5)Store需要知道Reducer函數，做法就是在生成Store的時候，將Reducer傳入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
(6)createStore接受Reducer作爲參數，生成一個新的Store。
(7)每當store.dispatch發送過來一個新的Action，就會自動調用Reducer,得到新的State。
7.store.subscribe()
(1)Store 允許使用store.subscribe方法設置監聽函數，一旦State發生變化，就自動執行這個函數
(2)只要把View的更新函數放到listen,就會實現View的自動渲染（這裏的更新函數其實就是Render或者setState）。
(3)store.subscribe方法返回一個函數，調用這個函數就可以解除監聽。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(Listener);
let unsubscribe = store.subscribe(() =>
console.log(store.getState());
)
</p>
接下來會用一張圖來表示這些關係
