redux原理、工作流程及其使用

• Redux對(duì)于JavaScript應(yīng)用而言是一個(gè)可預(yù)測(cè)狀態(tài)的容器。
• 換言之，它是一個(gè)應(yīng)用數(shù)據(jù)流框架，而不是傳統(tǒng)的像underscore.js或者AngularJs那樣的庫(kù)或者框架。

1、什么是redux？

redux是專門用于集中式管理狀態(tài)的javascript庫(kù)，他并不是react的插件庫(kù)。

比如你有多個(gè)組件A-E都想要用同一個(gè)組件D中的狀態(tài)：

1）像以前我們可以通過(guò)父子組件通信的方式讓父組件進(jìn)行傳遞狀態(tài)，或者是讓兄弟組件之間通過(guò)訂閱發(fā)布進(jìn)行通信

2）當(dāng)我們使用了redux就可以直接通過(guò)讓redux進(jìn)行統(tǒng)一的狀態(tài)管理，誰(shuí)想要用狀態(tài)就自己去拿，省去了第一種方法的層層傳遞

2、redux的工作流程

在我們了解redux的工作流程之前我們應(yīng)該要知道redux有三個(gè)核心概念，分別為actions、store、reducers（帶s的表明可能存在多個(gè)）

1）actions

actions英文直譯過(guò)來(lái)就是行動(dòng)、動(dòng)作的意思，那么我們就可以猜到他表示的是“怎么做”，簡(jiǎn)單來(lái)說(shuō)actions就是一個(gè)對(duì)象，actions里面有兩個(gè)屬性分別為type和data：

• type：標(biāo)識(shí)屬性，值為字符串且唯一，必要屬性（你想要做什么事情
• data：數(shù)據(jù)屬性，值為任意類型，可選屬性（你要做事情的數(shù)據(jù)

那我們淺淺舉個(gè)栗子：

比如計(jì)算器你可以進(jìn)行加1減2等操作，那么加減乘除這個(gè)操作就是你的type，數(shù)字就是你的數(shù)據(jù)

2）store

store有且只能有一個(gè)，他相當(dāng)于一個(gè)最高指揮家，他負(fù)責(zé)把a(bǔ)ction動(dòng)作交給對(duì)應(yīng)的reducer進(jìn)行執(zhí)行，也就是說(shuō)將state、action和reducer聯(lián)系在一起的對(duì)象。

3）reducer

reducer用于將store發(fā)過(guò)來(lái)的action完成并將結(jié)果返回給store，他接收兩個(gè)參數(shù)preState（舊狀態(tài)）和action（動(dòng)作）并返回一個(gè)newState（新?tīng)顟B(tài)）。

比如像計(jì)算器我們需要在原來(lái)的數(shù)據(jù)上進(jìn)行加1的操作，那么舊狀態(tài)舊對(duì)應(yīng)原來(lái)的數(shù)據(jù)，action對(duì)應(yīng)加1的操作，返回的新?tīng)顟B(tài)就是計(jì)算器加完之后重新返回的結(jié)果。

那么他的工作流程是什么樣的呢？

1）首先我們要確定我們要做什么

2）讓Action Creators創(chuàng)建action（也就是你要做的事情）

3）通過(guò)dispatch將action分發(fā)出去

4）store對(duì)要使用的reducer進(jìn)行綁定，然后將action分發(fā)到對(duì)應(yīng)的reducer上

5）在reducer上進(jìn)行相應(yīng)的action操作并返回結(jié)果給store

6）組件就可以通過(guò)store的API像store進(jìn)行獲取操作返回的結(jié)果

3、redux的舉例說(shuō)明

接下來(lái)我們會(huì)使用一個(gè)計(jì)算器的案例幫助大家更好的理解redux

1）Count組件

import store from '../../redux/store'
import { creatAdd, creatJian } from '../../redux/count_action'
export default class Count extends Component {
  ///相加
  addCount = () => {
    const { value } = this.selectValue///獲取當(dāng)前選擇的值
    store.dispatch(creatAdd(value * 1))
  }
  //相減
  lessCount = () => {
    const { value } = this.selectValue
    store.dispatch(creatJian(value * 1))
  }
  render () {
    return (
      <div>
        <h2>當(dāng)前計(jì)算器的值為：{store.getState()}</h2>
        <select ref={c => this.selectValue = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.addCount}>相加</button>&nbsp;
        <button onClick={this.lessCount}>相減</button>&nbsp;
      </div>
    )
  }
}

2）創(chuàng)建action

import { ADDCOUNT, CREATJIAN } from '../redux/constant'
export const creatAdd = data => ({ type: ADDCOUNT, data })
export const creatJian = data => ({ type: CREATJIAN, data })

3）store組件

import { legacy_createStore } from 'redux'
import countReducer from './count_reducer'
///將reducer和store聯(lián)系起來(lái)
export default legacy_createStore(countReducer)

4）reducer組件

import { ADDCOUNT, CREATJIAN } from './constant'
const inin = 0
export default function countReducer (pre = inin, action) {
  ///從action解析出type和data
  const { type, data } = action
  ///通過(guò)類型進(jìn)行匹配，判斷怎么做
  switch (type) {
    case ADDCOUNT:
      return pre + data
    case CREATJIAN:
      return pre - data
    default:
      return pre
  }
}

5）contant常量

為防止出現(xiàn)拼寫錯(cuò)誤
export const ADDCOUNT = 'addCount'
export const CREATJIAN = 'lessCount'

6）當(dāng)檢測(cè)到redux中的狀態(tài)發(fā)生變化時(shí)要進(jìn)行更新渲染

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
///在入口文件進(jìn)行更新渲染
store.subscribe(() => {
  root.render(
    <App />
  )
})

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論