學習筆記 react中實現倉庫redux

在react可以使用redux包來建立乙個資料倉儲。

在專案的根目錄下，開啟命令視窗，輸入以下命令： 

yarn add redux

在src目錄下，建立乙個store資料夾，在其資料夾內建立乙個index.js。 

import productreducer, from './product.js';

import cartreducer, from './cart.js';

// 先想好倉庫結構，每個子倉庫的結構。

// 總reducer

const reducer = combinereducers();

const store = createstore(reducer);

export default store;

// 統一匯入各自倉庫中的actionscreate再統一匯出。

export ;

其子倉庫**為：

// 子reducer

const initstate = ;

const actions = ;

// action creator作用是：讓元件和倉庫通訊更優雅

export const categoryactions = ) => );

},assignlistsub: fid => async () => );

}};const reducer = function(state = initstate, action) = action;

switch(type) , state, );

case actions.sub:

return object.assign({}, state, );

default:

return state;

}};export default reducer;

reducer函式的特點：

2.建立乙個reducer倉庫物件，reducer函式第一次呼叫時，可以設定乙個預設值，表示state的初始狀態。不過第一次呼叫時，第二個引數是沒有的，後續的reducer函式呼叫時，會將第二個引數傳過來，reducer函式會根據內部action，返回乙個新的state，相當於倉庫更新了。

3.action物件：如果乙個物件有乙個type屬性值是字串。redux認為它是action物件。

yarn add redux-thunk

dispatch函式預設只能接收actions物件，不能接收函式作為物件，所以我們要用第三方包redux-thunk來增強倉庫的dispatch方法，讓其能接收函式。給dispatch乙個函式，dispatch會立即執行，且會強制它state和dispatch函式自身作為這個立即執行函式的引數！（這個立即執行函式中可以包含非同步耗時的**，相當於倉庫發了ajax） 

使用後，可以在倉庫中傳送ajax。

// index.js檔案需要改變的內容

import thunk from 'redux-thunk';

// 子倉庫傳送ajax的**

export const categoryactions = ) => );
}}

為了在根例項index.js中匯入該包，就能將redux倉庫和專案聯絡起來。

yarn add react-redux

需要從react-redux中先解構除provider，再用provider包裹主根元件，並在標籤中匯入倉庫store。

// 根例項index.js

// 在使用jsx物件時，必須引入react
import react from 'react';
import reactdom from 'react-dom';
import  from 'react-router-dom';
import store from './store';
import  from 'react-redux';
reactdom.render(
,        document.getelementbyid('root')
);

在隨便乙個頁面級元件中，拿出倉庫中的資料，並且通知倉庫修改資料。

import  react,  from 'react';

import  from '../../components';
import  from 'react-redux';
import  from '../../store';
class home extends component 
this.props.change(123123)}>
test中的a值123123);}
}const mapstatetoprops = (state, props) => ();
const mapdispatchtoprops = (dispatch, props) => ();
export default connect(mapstatetoprops, mapdispatchtoprops)(home);

方法用react-redux包中的connect方法產生乙個高階元件，讓該元件稱為乙個連線倉庫和home元件的中間元件。

connect中需要兩個函式作為引數，兩個函式的返回值將會assign合併到服務（包裹）元件的props中。

第乙個引數：mapstatetoprops（state，props）。主要作用是將要服務的元件中從倉庫state中對映資料。該函式中有兩個引數：

state為redux倉庫中當前的state，props為父元件向本元件傳遞的值。

第二個引數：mapdispatchtoprops（dispatch，props）。主要作用就是將倉庫中的dispatch方法封裝成函式，對映到包裹元件的props中以供使用，讓包裹元件可以修改redux中的資料。

dispatch是redux中的dispatch函式。

React學習筆記

專案需要使用react進行開發，故從vue與react的異同切入學習，記錄一下學習筆記 react整體的思路就是函式式，所以推崇純元件，資料不可變，單向資料流 單向繫結 當然需要雙向的地方也可以做到，比如結合redux form vue是響應式的思想，認為資料可變，通過watcher監聽每乙個屬性，...

學習react筆記

node中匯入模組 var 名稱 require 模組識別符號 node中向外暴露成員的形式 module.exports 在es6中，也通過規範的形式，規定了es6中如何匯入和匯出模組 es6中匯入模組，使用 import 模組名稱 from 模組識別符號 import 表示路徑 import f...

react獲取全域性 react學習筆記

個人之前也粗略看過react的文件，但是程式設計師最怕的就是沒有專案實操，看完後一段時間就全忘了，但是現在市面上react的使用又很多 我太難了 最近因為疫情只能呆在家裡，剛好利用這段時間搞一搞。當然也是粗略的搞，做完乙個大屏展示後，發現react上手確實比vue要難點。react沒有vue一樣的模...