實不相瞞對於我這樣的前端小白，去年用到React開發專案的時候也看過React-redux但是說實話沒有看他懂，後來用到的框架就是Vue所以沒怎麼研究React但是最近一直聽移動端的朋友說到React-Native所以想重新看看react-redux再看看React-Native。沒錯我就是這麼個善變的女人，哈哈哈，言歸正傳。
首先我覺學習react-redux的前提是知道什麼是react-redux，以及為什麼出現react-redux，這樣才能真正意識到學習它的必要性。然後在學習它解決了什麼問題基礎上才能使用它。

1.Redux
共享狀態值–state
舉個例子！ 正常情況下多個子孫元件共享父元件的主題顏色themeColor時是這個樣子的。
每層都需要寫 props.themeColor，但是假如現在content裡面有個按鈕想要去改變這個themeColor在沒有共享狀態概念前就必須通過一層一層傳遞給index由index去修改themeColor通過父元件主動重新渲染的方式來傳入新的 props，從而達到更新的效果。我的天！受不了了，這要是嵌套個幾十個層級關係可怎麼辦啊，所以顯然必須需要找到方法去改變這種傳遞方式。所以就有了context。React.js 的 context 其實像就是元件樹上某顆子樹的全域性變數。

提高了修改資料的門檻
一個可以被不同模組任意修改共享的資料狀態就是魔鬼，一旦資料可以任意修改，所有對共享狀態的操作都是不可預料的出現問題的時候 debug 起來就非常困難，這就是老生常談的儘量避免全域性變數。
所以我們需要提高修改資料的門檻，在修改共享狀態的時候，我們需要定義一個標準，並且去修改共享狀態值。

function stateChanger (action) {
switch (action.type) {
case ‘UPDATE_TITLE_TEXT’:
appState.title.text = action.text
break
case ‘UPDATE_TITLE_COLOR’:
appState.title.color = action.color
break
default:
break
}
}

這樣每次修改共享狀態值就需要經過stateChanger。

我們就把它抽象出來一個 createStore
引數是共享狀態值以及修改規則，函式裡面包含 getState 和 dispatch 函式，方便我們使用。同時我們需要監聽資料的變化，因為不僅僅需要改變狀態值，還需要渲染到相應的Dom元素中去。
function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    stateChanger(state, action)
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

function renderApp (appState) {
  renderTitle(appState.title)
  renderContent(appState.content)
}

function renderTitle (title) {
  const titleDOM = document.getElementById('title')
  titleDOM.innerHTML = title.text
  titleDOM.style.color = title.color
}

function renderContent (content) {
  const contentDOM = document.getElementById('content')
  contentDOM.innerHTML = content.text
  contentDOM.style.color = content.color
}

let appState = {
  title: {
    text: 'React.js 小書',
    color: 'red',
  },
  content: {
    text: 'React.js 小書內容',
    color: 'blue'
  }
}

function stateChanger (state, action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      state.title.text = action.text
      break
    case 'UPDATE_TITLE_COLOR':
      state.title.color = action.color
      break
    default:
      break
  }
}

const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState())) // 監聽資料變化

renderApp(store.getState()) // 首次渲染頁面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小書》' }) // 修改標題文字
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改標題顏色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
不希望每次資料改變後所有子元件變化
通過上面的程式碼示例你會發現，每次資料變化都會都出觸發資料監聽重新renderApp。那就會導致每一次所有的Dom元素重新載入。如何才能做到資料沒有資料變化的子元件，不重新渲染呢，兩步操作
一在資料渲染前進行新舊值得比較。二，賦值時物件不能指向同一地址
function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = stateChanger(state, action) // 覆蓋原物件
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

function renderApp (newAppState, oldAppState = {}) { // 防止 oldAppState 沒有傳入，所以加了預設引數 oldAppState = {}
  if (newAppState === oldAppState) return // 資料沒有變化就不渲染了
  console.log('render app...')
  renderTitle(newAppState.title, oldAppState.title)
  renderContent(newAppState.content, oldAppState.content)
}

function renderTitle (newTitle, oldTitle = {}) {
  if (newTitle === oldTitle) return // 資料沒有變化就不渲染了
  console.log('render title...')
  const titleDOM = document.getElementById('title')
  titleDOM.innerHTML = newTitle.text
  titleDOM.style.color = newTitle.color
}

function renderContent (newContent, oldContent = {}) {
  if (newContent === oldContent) return // 資料沒有變化就不渲染了
  console.log('render content...')
  const contentDOM = document.getElementById('content')
  contentDOM.innerHTML = newContent.text
  contentDOM.style.color = newContent.color
}

let appState = {
  title: {
    text: 'React.js 小書',
    color: 'red',
  },
  content: {
    text: 'React.js 小書內容',
    color: 'blue'
  }
}

function stateChanger (state, action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      return { // 構建新的物件並且返回
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_TITLE_COLOR':
      return { // 構建新的物件並且返回
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state // 沒有修改，返回原來的物件
  }
}

const store = createStore(appState, stateChanger)
let oldState = store.getState() // 快取舊的 state
store.subscribe(() => {
  const newState = store.getState() // 資料可能變化，獲取新的 state
  renderApp(newState, oldState) // 把新舊的 state 傳進去渲染
  oldState = newState // 渲染完以後，新的 newState 變成了舊的 oldState，等待下一次資料變化重新渲染
})

renderApp(store.getState()) // 首次渲染頁面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小書》' }) // 修改標題文字
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改標題顏色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
reducer函式
reducer函式其實就是將上述中的appstore以及stateChanger合併到一起。可以將它看成一個純函式，只負責初始化State以及根據action改變state並返回一個更新後的state。
function themeReducer (state, action) {
  if (!state) return {
    themeName: 'Red Theme',
    themeColor: 'red'
  }
  switch (action.type) {
    case 'UPATE_THEME_NAME':
      return { ...state, themeName: action.themeName }
    case 'UPATE_THEME_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

const store = createStore(themeReducer)
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

--------------------- 
作者：888小婷 
來源：CSDN 
原文：https://blog.csdn.net/qq_40674204/article/details/84939290 
版權宣告：本文為博主原創文章，轉載請附上博文連結！