Redux總結(jié)

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

做為一個(gè)前端小白，在自學(xué)Redux過程中個(gè)人認(rèn)為首先需要明白Action、Store、reducer(state,action)、Component中間的關(guān)系，簡單的可以理解為圖書館借書的過程，用戶提出借什么書的請(qǐng)求給管理員，管理員去reducer里查找有沒有你需要的書，reducer會(huì)返回一個(gè)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ù)并返回一個(gè)新的數(shù)據(jù)，

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

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訂閱一個(gè)更新函數(shù)，待dispatch之后，執(zhí)行這個(gè)更新函數(shù)，獲取新的值
store.subScribe(this.hadChangeValue.bind(this))
hadChangeValue(){
  this.setState(store.getState())
}

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

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){
    //聲明一個(gè)action，它是一個(gè)函數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109628.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Drinkey

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Redux總結(jié)

相關(guān)文章

**對(duì)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ā)表評(píng)論

0條評(píng)論

Drinkey

男|高級(jí)講師

TA的文章

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

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

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

flex布局

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

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

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

自適應(yīng)布局

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

Redux總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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