手牽手學習react之如何使用redux（一）

2021-10-09 07:24:15 字數 2039 閱讀 9503

外掛程式

yarn add redux
index.js

import  from "redux";


import reducer from "./reducer";


const store = createstore(reducer);


export default store;
reducer.js

const defaultstate = ;


// reducer可以接收state,但絕不能修改state


export default (state = defaultstate, action) => 


}
import store from "./store";


export default class todo extends component 


}
向store派發action

import store from "./store";


inputchange(e) 


store.dispatch(action);


}
reducer中根據type接收 做相應處理

const defaultstate = ;


// reducer可以接收state,但絕不能修改state


export default (state = defaultstate, action) => 


}
怎麼在元件中再次獲取實時的資料？（訂閱）store.subscribe(this.handlestorechange);

import store from "./store";


export default class todo extends component 


handlestorechange() 


}
至此：react與redux的互動結束完善react與redux互動，

主要解決的問題：當type型別設定為常量的時候，更加容易定位到報錯，所以新增actiontype.js用於放置常量

export const change_input_value = "change_input_value";


export const add_todo_item = "add_todo_item";


export const delete_todo_item = "delete_todo_item";
新增actioncreators.js檔案，用於統一放置action,以函式的形式匯出，有利於前端自動化測試，有利於統一維護

import  from "./actiontype";


export const getinputchangeaction = (value) => ();


export const getadditemaction = () => ();


export const getdeleteitemaction = (index) => ();
在元件中如何呼叫？

import store from "./store";


import  from "./store/actioncreators";


inputchange(e) 


submithandle() 


deleteitem(index)
惟願山河無恙，國泰民安，幸哉~

手牽手學習vue之如何封裝請求及處理跨域

正常情況下，我們使用ajax請求的資料都在自己的伺服器上。但在一些特定的場景中，我們需要獲取到別人的伺服器上的資料，也就是在自己的伺服器中的ajax要請求到別人的伺服器的 這就是跨域。跨域是瀏覽器為了安全而做出的策略 同源策略 即同埠，同網域名稱，同協議 簡述 vue cli3.0發布後，專案配置檔...

學習筆記之React

virtual dom 虛擬dom 傳統的web應用，操作dom一般是直接更新操作的，但是我們知道dom更新通常是比較昂貴的。而react為了盡可能減少對dom的操作，提供了一種不同的而又強大的方式來更新dom，代替直接的dom操作。就是virtual dom,乙個輕量級的虛擬的dom，就是reac...

react學習之彈出層

react的彈出層不同於以往的dom程式設計，我們知道，在dom中，彈出層事件繫結在對應的節點上即可，但是在react中，往往只能實現父子之間的傳遞控制，顯然，彈出層的層級不符合此關係。在這裡我們需要使用react官方的portals portals可以幫助我們將子節點插入到父節點層級之外的地方 注...