Redux總結(jié)

Drinkey 發(fā)布于2019-08-26 13:50 / 1409人閱讀

做為一個前端小白，在自學(xué)Redux過程中個人認(rèn)為首先需要明白Action、Store、reducer(state,action)、Component中間的關(guān)系，簡單的可以理解為圖書館借書的過程，用戶提出借什么書的請求給管理員，管理員去reducer里查找有沒有你需要的書，reducer會返回一個state數(shù)據(jù)告訴管理員有沒有這本書，用戶通過store.getState()方法得到管理員從reducer得到的數(shù)據(jù)。

簡介：以TodoList為例由淺入深的學(xué)習(xí)redux。
一、創(chuàng)建store、reducer，引入到文件后并調(diào)用store里數(shù)據(jù)

1、創(chuàng)建store:使用redux的createStore（）方法創(chuàng)建，導(dǎo)出store

// 創(chuàng)建store
import {createStore} from "redux"
// 引入reducer
import reducer from 路徑

const store=createStore(reducer);

export default store;

3、創(chuàng)建reducer數(shù)據(jù)：直接返回函數(shù)，默認(rèn)返回參數(shù)State

//創(chuàng)建reducer
const defaultState={}
export default (state=defaultState,action) => {
    return state;
}

4、將store文件引入到目錄下，使用stroe.getState()方法獲取reducer里的數(shù)據(jù)

5、聲明action并使用store.dispatch(action)方法將action傳遞給store，reducer里接收store自行傳過來的action與state數(shù)據(jù)并返回一個新的數(shù)據(jù)，

 // 組件訂閱store
store.subscribe(被訂閱者)，實(shí)現(xiàn)聯(lián)動效果

hadChange(e){
  // 聲明action
  const action={
    type："change_input_value";
    value:e.taget.value
  }
  // 將action傳遞給store
  store.dispatch(action)
}

// state只能接收數(shù)據(jù)不能操作數(shù)據(jù)，需要將數(shù)據(jù)進(jìn)行深拷貝
if(action.type === "change_input_value"){
  const newState=JSON.parse(JSON.stringify(state));
  newState.value=action.value;
  return newState;
}

//store訂閱一個更新函數(shù)，待dispatch之后，執(zhí)行這個更新函數(shù)，獲取新的值
store.subScribe(this.hadChangeValue.bind(this))
hadChangeValue(){
  this.setState(store.getState())
}

6、actionTyps.js是將所有action以變量的形式存到j(luò)s文件里，方便后續(xù)因拼寫出錯導(dǎo)致查找報(bào)錯原因，代碼如下：

export const CHANGE_INPUT_VALUE ="change_input_value";
export const ADD_TODO_ITEM ="add_todo_item";
export const DELE_TODO_ITEM ="dele_todo_item";

二、詳細(xì)代碼如下：

1、創(chuàng)建Antds模塊

import React, { Component,Fragment } from "react";
//引入antd庫
import { Input,Button, List} from "antd";
import store from "../store/index.js"
import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from "../store/actionTyps"

class Antds extends Component {
  constructor(props){
    super(props);
    this.state=store.getState();
    this.hadChange=this.hadChange.bind(this);
    this.changeValue=this.changeValue.bind(this);
    this.hadClick=this.hadClick.bind(this);
    //訂閱store
    store.subscribe(this.changeValue)
  }

  hadChange(e){
    //聲明一個action，它是一個函數(shù)
    const action={
      type:CHANGE_INPUT_VALUE,
      value:e.target.value
    }
    // 將action傳給store，使用store提共的dispatch(action)方法
    store.dispatch(action)
  }
  // 點(diǎn)擊按鈕聲明action
  hadClick(){
    const action ={
      type:ADD_TODO_ITEM,
    }
    // 將action傳遞給store
    store.dispatch(action)
  }
  changeValue(){
    // 感知到stoe發(fā)生變化后調(diào)用store.getState()
    this.setState(store.getState())
  }
  hadClickItem(index){
    const action ={
      type:DELE_TODO_ITEM,
      index
    }
    // 將action傳遞給store
    store.dispatch(action)
  }
  render() {
    return (
      
        
          
          
        
         (
            
             {item}
            
          )}
        />
      
    );
  }
}

export default Antds;

2、創(chuàng)建store

// 利用redux里的createStore（）方法創(chuàng)建store
import {createStore} from "redux"
// reducers里存放所有數(shù)據(jù)
import reducers from "./reducers"
const store=createStore(reducers);

// 導(dǎo)出store
export default store;

3、創(chuàng)建reducer

import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from "./actionTyps"
const defaultState={
    inputValue:"",
      lis:[],
}

export default (state=defaultState,action)=>{
    if(action.type===CHANGE_INPUT_VALUE ){
        // 深拷貝
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        return newState;
    }
    if(action.type === ADD_TODO_ITEM){
        // 深拷貝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.push(newState.inputValue);
        newState.inputValue="";
        return newState;
    }
    if(action.type === DELE_TODO_ITEM){
        // 深拷貝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.splice(action.index)
        return newState;
    }
    return state;
}

4、將所有action以變量形式存到文件中

export const CHANGE_INPUT_VALUE ="change_input_value";
export const ADD_TODO_ITEM ="add_todo_item";
export const DELE_TODO_ITEM ="dele_todo_item";

-----------------持續(xù)更新中-------------------

GPU云服務(wù)器云服務(wù)器 Redux redux源碼 redux-saga react-redux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109628.html

發(fā)表評論

登陸后可評論

0條評論

Drinkey

男|高級講師

我要關(guān)注我要私信

TA的文章

??蘇州程序大白一文從基礎(chǔ)手把手教你Python數(shù)據(jù)可視化大佬??《??記得收藏??》

閱讀 1867·2021-10-09 09:44
開源協(xié)議思維導(dǎo)圖

閱讀 3395·2021-09-28 09:35
EskyFun數(shù)據(jù)泄露，超過100萬Android玩家受到影響

閱讀 1387·2021-09-01 10:31
flex布局

閱讀 1676·2019-08-30 15:55
相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）等用法

閱讀 2719·2019-08-30 15:54
原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

閱讀 941·2019-08-29 17:07
響應(yīng)式布局設(shè)計(jì)

閱讀 1389·2019-08-29 15:04
自適應(yīng)布局

閱讀 2013·2019-08-26 13:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Redux總結(jié)

相關(guān)文章

**對redux和react-redux的理解和總結(jié)（一）**

單頁應(yīng)用開發(fā)總結(jié)

**一篇文章總結(jié)redux、react-redux、redux-saga**

***Redux* 的簡單*總結(jié)***

**React組件設(shè)計(jì)實(shí)踐總結(jié)05 - 狀態(tài)管理**

發(fā)表評論

0條評論

Drinkey

男|高級講師

TA的文章

??蘇州程序大白一文從基礎(chǔ)手把手教你Python數(shù)據(jù)可視化大佬??《??記得收藏??》

開源協(xié)議思維導(dǎo)圖

EskyFun數(shù)據(jù)泄露，超過100萬Android玩家受到影響

flex布局

相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）等用法

原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

響應(yīng)式布局設(shè)計(jì)

自適應(yīng)布局

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Redux總結(jié)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！