根據(jù)流程圖，可以想象，React Components 是借書(shū)的用戶， Action Creactor 是借書(shū)時(shí)說(shuō)的話(借什么書(shū))， Store 是圖書(shū)館管理員，Reducer 是記錄本(借什么書(shū)，還什么書(shū)，在哪兒，需要查一下)， state 是書(shū)籍信息

整個(gè)流程就是借書(shū)的用戶需要先存在，然后需要借書(shū)，需要一句話來(lái)描述借什么書(shū)，圖書(shū)館管理員聽(tīng)到后需要查一下記錄本，了解圖書(shū)的位置，最后圖書(shū)館管理員會(huì)把這本書(shū)給到這個(gè)借書(shū)人

轉(zhuǎn)換為代碼是，React Components 需要獲取一些數(shù)據(jù), 然后它就告知 Store 需要獲取數(shù)據(jù)，這就是就是 Action Creactor , Store 接收到之后去 Reducer 查一下， Reducer 會(huì)告訴 Store 應(yīng)該給這個(gè)組件什么數(shù)據(jù)

三、如何使用

創(chuàng)建一個(gè)store的公共數(shù)據(jù)區(qū)域

import { createStore } from 'redux' // 引入一個(gè)第三方的方法
const store = createStore() // 創(chuàng)建數(shù)據(jù)的公共存儲(chǔ)區(qū)域（管理員）

還需要?jiǎng)?chuàng)建一個(gè)記錄本去輔助管理數(shù)據(jù)，也就是reduecer，本質(zhì)就是一個(gè)函數(shù)，接收兩個(gè)參數(shù)state，action，返回state

// 設(shè)置默認(rèn)值
const initialState = {
  counter: 0
}

const reducer = (state = initialState, action) => {
}

然后就可以將記錄本傳遞給store，兩者建立連接。

如下：

const store = createStore(reducer)

如果想要獲取store里面的數(shù)據(jù)，則通過(guò)store.getState()來(lái)獲取當(dāng)前state

console.log(store.getState());

下面再看看如何更改store里面數(shù)據(jù)，是通過(guò)dispatch來(lái)派發(fā)action，通常action中都會(huì)有type屬性，也可以攜帶其他的數(shù)據(jù)

store.dispatch({
  type: "INCREMENT"
})

store.dispath({
  type: "DECREMENT"
})

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})

下面再來(lái)看看修改reducer中的處理邏輯：

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

注意，reducer是一個(gè)純函數(shù)，不需要直接修改state

這樣派發(fā)action之后，既可以通過(guò)store.subscribe監(jiān)聽(tīng)store的變化，如下：

store.subscribe(() => {
  console.log(store.getState());
})

在React項(xiàng)目中，會(huì)搭配react-redux進(jìn)行使用

完整代碼如下：

const redux = require('redux');

const initialState = {
  counter: 0
}

// 創(chuàng)建reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

// 根據(jù)reducer創(chuàng)建store
const store = redux.createStore(reducer);

store.subscribe(() => {
  console.log(store.getState());
})

// 修改store中的state
store.dispatch({
  type: "INCREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "DECREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})
// console.log(store.getState());

小結(jié)

createStore可以幫助創(chuàng)建 store
store.dispatch 幫助派發(fā) action , action 會(huì)傳遞給 store
store.getState 這個(gè)方法可以幫助獲取 store 里邊所有的數(shù)據(jù)內(nèi)容
store.subscrible 方法訂閱 store 的改變，只要 store 發(fā)生改變， store.subscrible 這個(gè)函數(shù)接收的這個(gè)回調(diào)函數(shù)就會(huì)被執(zhí)行

到此這篇關(guān)于一文理解Redux及其工作原理的文章就介紹到這了,更多相關(guān) Redux 工作原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: