在react可以使用redux包來建立乙個資料倉儲。
在專案的根目錄下，開啟命令視窗，輸入以下命令：
yarn add redux在src目錄下，建立乙個store資料夾，在其資料夾內建立乙個index.js。import categoryreducer, from './category.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-thunkdispatch函式預設只能接收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一樣的模...