淺談redux(一)

文章借鑑於：Redux入門教程

一.什麼是Redux?

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。他可以彌補react兩個不足之處，程式碼的結構和元件之間的通訊。Redux有三大原則，單一的資料來源，state是隻讀的，使用純函式來執行修改。

二.什麼情況下使用Redux？

• 某個元件的狀態需要共享
• 一個元件需要改變全域性狀態
• 一個元件需要改變另一個元件的狀態
• 不同身份的使用者有不同的渲染
• 多個使用者之間可以相互協作
• 與伺服器大量互動，或者使用了WebSocket
• View要從多個來源獲取資料

以上情況當你使用Redux時，會發現它的妙處。

三.Redux中的API

3.1 Store
當你使用Redux時，第一步需要建立一個Store倉庫,Store像是一個容器。整個專案中只有一個Store

import { createStore } from 'redux';
const store = createStore(reducer);
exprot default store

以上程式碼中建立了一個createStore例項，返回的是一個物件

3.2 State
State是Store倉庫中的快照資料,你可以通過store.getState()獲取到。

import { createStore } from 'redux';
const store = createStore(reducer);

const state = store.getState();

你需要知道Redux的設計思路,web應用是一個狀態機,檢視與資料是一一對應的，所以一個State對應一個View。只要State相同,View就相同

3.3 Action Creator
你可以在元件中建立一個actionCreator.js檔案,此檔案專門用來新增Action，Action 是一個物件。其中的type屬性是必須的，表示 Action 的名稱,此物件會在元件中通過store.dispatch(actionCreator.incAction§)呼叫傳給倉庫用以改變state的資料

export default {
	incAction(p){
	return {
		type:'INCREMENT', //type的值必須要大寫
		p
	}
  }
}

3.4 store.dispatch()
上文提到通過store.dispatch可以在View中發出Action，且這種方式是唯一發出Action的方法。

import { createStore } from 'redux';
import actionCreator from './actionCreator'
const store = createStore(reduce);

//此處表示在元件中將資料傳給store倉庫
store.dispatch( actionCreator.incAction(p) )

3.5 Reducer
在上文都提到了一段程式碼:

import { createStore } from 'redux';
const store = createStore(reducer)

在createStore函式中的reducer是什麼呢？
他其實相當於State與View的加工廠,你可以通過Reducer將Store收到的Action經過加工,返回一個新的State返回給View。並且Reducer是一個純函式(只要同樣的輸入，必定得到同樣的輸出),這就可以保證同樣的State，必定得到同樣的View。但也正因為這樣,Reducer不能改變State,必須返回一個全新的物件

const initalState = {
	n:1
}
const reducer = (state=initalState,action){
	switch(action.type){
		case 'ADD':
		 	let newState = {...state}
		 	newState.n += 1
		 	return newState
		 default:
		 	return state
		 	
	}
}
export default reducer

上述程式碼可以看出,Reducer將store接收到的Action加工,返回了一個新的State,並且Action中的type決定了Reducer中的行為。

3.6 store.subscribe()
既然能在View中將引數通過dispatch的方式改變資料,那麼怎麼在View中獲取最新的State資料呢,這時就需要用到store.subscribe()。一旦State發生變化，就會自動執行這個函式，從而在View中獲取最新的State。

import { createStore } from 'redux'
const store = createStore(reducer);

export default class One extends Component {
    constructor(props) {
        super(props)
        this.state = {
            b: store.getState().b
        }
        store.subscribe(this.change)
    }
    //資料改變
    change = () => {
        this.setState({
            b: store.getState().b
        })
    }

下面通過一張Redux單項資料流來解釋Redux工作流程

首先使用者發出Action，然後Store自動呼叫Reducer，並且傳入兩個引數:當前State 和收到的 Action。 Reducer 會返回新的 State 。State 一旦有變化，Store 就會呼叫監聽函式，從而獲取新的資料重新渲染View