作者：水濤
追求技術，但又不失生活的樂趣，過自己想要的生活
React-Redux簡介
-
React-Redux可以使你的React專案擁有全域資料，可以使多個React組件讀取到全域資料并且組件中也可修改它，
-
React-Redux你可以理解為Vue中的Vuex,也是一種全域狀態（不懂Vue的這條略過），
-
React-Redux由store、action構建函式、reducer組成，store負責維護全域狀態，action構建函式負責創建action物件，reducer處理action物件并更新store，
React-Redux安裝
打開vscode終端中輸入：npm install --save--dev react-redux redux 回車即可下載安裝
本文中的ReactRedux版本資訊如下
React-Redux版本為：7.1.3
Redux版本為：4.0.4
概念鋪墊
React中的組件分為兩種：
- 顯示組件：只顯示資料，沒有業務邏輯，
- 容器組件：有state狀態，有業務邏輯，
顯示組件示例：
function Show(props){
return (
<div>
<div>姓名：{props.name}</div>
<div>性別：{props.sex}</div>
</div>
);
}
容器組件示例：
class ShowContainer extends Component{
constructor(props)
{
super(props);
this.state={
name:"微差",
sex:"男"
};
}
render()
{
let {name,sex} = this.state;
return <Show name={name} sex={sex}/>;
}
}
可以看到容器組件中渲染的是顯示組件,顯示組件的一切資料來源于容器組件
創建容器組件
- 引入
React-Redux中的connect函式，用它創建容器組件
創建容器組件代碼如下
/*引入connect函式*/
import {connect} from "react-redux";
/*宣告Show組件*/
function Show(props){
return (
<div>
<div>姓名：{props.name}</div>
<div>性別：{props.sex}</div>
</div>
);
}
function mapStateToProps(state){
if (typeof state == "undefined") return { name: "", sex: "" };
return {
name:state.name,
sex:state.sex
};
}
/*action建構式*/
function onChangeName(data){
return {
type:"NAME",
data:data
};
}
function mapDispatchToProps(dispatch){
return{
onChangeName:(data)=>{dispatch(onChangeName(data));}
};
}
/*創建容器組件*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);
代碼決議：
- 從
React-Redux中引入connect函式， - 宣告函式組件
Show——用于展示資料， - 撰寫
mapStateToProps函式：引數是容器組件的state物件，用于將容器組件（在例子中是Container）的state物件值映射到對應顯示組件（在例子中是Show組件）的props屬性上，因此后續Show組件可以通過props.name直接獲取到容器組件的state.name， - 撰寫
onChangeName函式：創建action物件,action物件中必須存在type屬性，否則報錯， - 撰寫
mapDispatchToProps函式：函式的第一個引數是dispatch函式,mapDispatchToProps函式回傳一個物件，物件的每一個屬性都是一個函式，函式最終呼叫了dispatch方法，dispatch方法中傳入action物件，當呼叫dispatch時會觸發store中的reducer函式，對store進行更新， - 呼叫
connect生成容器組件：使用connect函式,傳入mapStateToProps與mapDispatchToProps函式作為引數，此時會回傳一個函式，繼續將Show組件傳入，最終生成了一個Show組件的容器組件，此時，這個容器組件的state將會按照mapStateToProps函式的映射方式與Show組件的props進行一一對應，并且props中擁有mapDispatchToProps中映射的函式，可以在Show組件中呼叫以更新store，容器組件就像我開頭鋪墊的一樣，在頁面使用容器組件，實際渲染的是顯示組件，
到這一步，我們已經生成了容器組件，并且能夠在顯示組件中顯示容器組件的state資料，并且能夠修改store，那么問題來了，容器組件的state用什么設定呢？怎么創建store啊？下面，666了，
創建store
- 引入
redux中的createStore函式，通過它創建store createStore需要一個函式作為引數，這個引數就是reducer，reducer就是一個函式
創建store物件代碼如下：
/*引入createStore*/
import {createStore} from "redux";
/*宣告一個reducer函式，并設定state的默認值*/
const reducer = function(state={name:"",sex:""},action){
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {age:action.data};
break;
}
};
/*創建store物件*/
let store = createStore(reducer);
reducer函式的第一個引數可以設定全域state物件的默認值，第二個引數就是action構建函式回傳的物件了，reducer根據
action.type做出不同的操作，最侄訓傳的物件會與當前全域state進行合并，從而達到更新store的效果
使用Provider使組件得到全域資料
Provider組件會讓所有被它包裹的子孫容器組件拿到它的store屬性中的state作為本身的state物件，因此只需要創建store并傳給Provider的store屬性，讓Provider作為父元素包裹容器組件就OK了，容器組件的state就有了，
- 引入
React-Redux中的Provider組件 - 創建
store - 將
store作為Provider組件的store屬性傳入 - 把容器組件包裹在
Provider下，容器組件的state便得到了store中的資料，并且映射給了顯示組件，顯示組件就可以顯示全域資料了，顯示組件中呼叫mapDispatchToProps中映射的方法便可修改全域資料
import {Provider} from "react-redux";
import {createStore} from "redux";
/*撰寫reducer*/
const reducer=(state={name:"微差",sex:"男"},action)=>{
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {sex:action.data};
break;
}
};
/*創建store*/
let store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<Container/>
</Provider>
,document.getElementById("root"));
最終DEMO
/*引入必要函式*/
import {connect,Provider} from "react-redux";
import {createStore} from "redux";
import {render} from "react-dom";
/*宣告顯示組件*/
function Show(props){
/*呼叫onChangeName修改全域資料*/
function change(){
props.onChangeName("change");
}
return (
<div>
<div>姓名：{props.name}</div>
<div>性別：{props.sex}</div>
<input value="改變名稱" type="button" onClick={change} ></input>
</div>
);
}
/*撰寫映射props函式*/
function mapStateToProps(state){
if (typeof state == "undefined") return { name: "", sex: "" };
return {
name:state.name,
sex:state.sex
};
};
/*action建構式*/
function onChangeName(data){
return {
type:"NAME",
data:data
};
};
/*撰寫映射dispatch函式*/
function mapDispatchToProps(dispatch){
return{
onChangeName:(data)=>{dispatch(onChangeName(data));}
};
};
/*創建容器組件*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);
/*宣告一個reducer函式，并設定state的默認值*/
const reducer = function(state={name:"",sex:""},action){
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {sex:action.data};
break;
}
};
/*創建store物件*/
let store = createStore(reducer);
render(<Provider store={store}>
<Container/>
</Provider>,document.getElementById("root"));
運行一下看看，點擊按鈕，將改變名稱
到這里，一個最簡單的原理性的Demo就完成了，
- Container容器組件通過
connect(mapStateToProps,mapDispatchToProps)(Show)方法生成， - Container組件會渲染Show組件，
- Show組件的props屬性與Container組件的state的映射關系由mapStateToProps與mapDispatchToProps配置，
- 通過
createStore創建store——createStore(reducer) - 設定Provider的
store，并將Container放置在Provider元素下，Container便能得到Provider中的store作為自己的state，完成映射，因此，connect中配置的映射也可以理解為與store的映射
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/161043.html
標籤：JavaScript