React 基礎(chǔ)鞏固(三十二)——Redux的三大原則

一、Redux的三大原則

1. 單一數(shù)據(jù)源

   • 整個應(yīng)用程序的state被存儲在一顆object tree 中，并且這個object tree 只存儲在一個store中；
   • Redux并沒有強(qiáng)制讓我們不能創(chuàng)建多個Store，但是那樣做不利于數(shù)據(jù)維護(hù)；
   • 單一的數(shù)據(jù)源可以讓整個應(yīng)用程序的state變得方便維護(hù)、追蹤、修改；

2. State是只讀的

   • 唯一修改State的方法一定是觸發(fā)action，不要試圖在其他地方通過任何的方式來修改State；

   • 這樣就確保了View或網(wǎng)絡(luò)請求都不能直接修改state，它們只能通過action來描述自己想要如何修改state；

   • 這樣可以保證所有的修改都被集中化處理，并且按照嚴(yán)格的順序來執(zhí)行，所以不需要擔(dān)心reace condition（競態(tài)）的問題；

3. 使用純函數(shù)來執(zhí)行修改

   • 通過reducer將舊state和actions聯(lián)系在一起，并且返回一個新的state；
   • 隨著應(yīng)用程序的復(fù)雜度增加，我們可以將reducer拆分成多個小的reducers，分別操作不同state tree 的一部分；
   • 但是所有的reducer都應(yīng)該是純函數(shù)，不能產(chǎn)生任何的副作用；

二、Redux的使用流程

三、Redux的基本使用（計數(shù)器小案例）

1. 構(gòu)建react項目

   # 創(chuàng)建新的react項目
   create-react-app redux-learn
   # 創(chuàng)建成功后cd進(jìn)入文件夾，隨后安裝redux
   npm install redux
   

2. 刪除暫時無關(guān)文件，構(gòu)建store相關(guān)文件，并引用store至所需頁面中

   • 目錄

• store/constants.js

  export const ADD_NUMBER = "add_number";
  export const SUB_NUMBER = "sub_number";
  

• store/reducer.js

  import * as actionTypes from "./constants";
  
  const initialState = {
    counter: 111,
  };
  
  function reducer(state = initialState, action) {
    switch (action.type) {
      case actionTypes.ADD_NUMBER:
        return { ...state, counter: state.counter + action.num };
      case actionTypes.SUB_NUMBER:
        return { ...state, counter: state.counter - action.num };
      default:
        return state;
    }
  }
  
  export default reducer;
  
  

• store/actionCreators.js

  import * as actionTypes from "./constants";
  
  export const addNumberAction = (num) => ({
    type: actionTypes.ADD_NUMBER,
    num,
  });
  
  export const subNumberAction = (num) => ({
    type: actionTypes.SUB_NUMBER,
    num,
  });
  
  

• store/index.js

  import { createStore } from "redux";
  import reducer from "./reducer";
  
  const store = createStore(reducer);
  
  export default store;
  
  

• pages/home.jsx

  import React, { PureComponent } from "react";
  import store from "../store";
  import { addNumberAction } from "../store/actionCreators";
  export class home extends PureComponent {
    constructor() {
      super();
  
      this.state = {
        counter: store.getState().counter,
      };
    }
    componentDidMount() {
      store.subscribe(() => {
        const state = store.getState();
        this.setState({
          counter: state.counter,
        });
      });
    }
  
    addNumber(num) {
      store.dispatch(addNumberAction(num));
    }
  
    render() {
      const { counter } = this.state;
      return (
        <div>
          home counter:{counter}
          <div>
            <button onClick={(e) => this.addNumber(1)}>+1</button>
            <button onClick={(e) => this.addNumber(5)}>+5</button>
            <button onClick={(e) => this.addNumber(8)}>+8</button>
          </div>
        </div>
      );
    }
  }
  
  export default home;
  
  

• pages/profile.jsx

  import React, { PureComponent } from "react";
  import store from "../store";
  import { subNumberAction } from "../store/actionCreators";
  export class profile extends PureComponent {
    constructor() {
      super();
  
      this.state = {
        counter: store.getState().counter,
      };
    }
    componentDidMount() {
      store.subscribe(() => {
        const state = store.getState();
        this.setState({
          counter: state.counter,
        });
      });
    }
  
    subNumber(num) {
      store.dispatch(subNumberAction(num));
    }
  
    render() {
      const { counter } = this.state;
      return (
        <div>
          profile counter:{counter}
          <div>
            <button onClick={(e) => this.subNumber(1)}>-1</button>
            <button onClick={(e) => this.subNumber(5)}>-5</button>
            <button onClick={(e) => this.subNumber(8)}>-8</button>
          </div>
        </div>
      );
    }
  }
  
  export default profile;
  
  

• App.jsx

  import React, { PureComponent } from "react";
  import Home from "./pages/home";
  import Profile from "./pages/profile";
  import "./style.css";
  import store from "./store";
  
  export class App extends PureComponent {
    constructor() {
      super();
  
      this.state = {
        counter: store.getState().counter,
      };
    }
    componentDidMount() {
      store.subscribe(() => {
        const state = store.getState();
        this.setState({
          counter: state.counter,
        });
      });
    }
    render() {
      const { counter } = this.state;
      return (
        <div>
          <h2>App Counter: {counter}</h2>
  
          <div className="pages">
            <Home />
            <Profile />
          </div>
        </div>
      );
    }
  }
  
  export default App;
  
  

3. 運(yùn)行結(jié)果
   

至此，代碼仍較為復(fù)雜，代碼將在React 基礎(chǔ)鞏固(三十三)中得到優(yōu)化文章來源地址http://www.zghlxwxcb.cn/news/detail-605505.html

到了這里，關(guān)于【前端知識】React 基礎(chǔ)鞏固(三十二)——Redux的三大原則、使用流程及實踐的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！