[修仙之路]React-Redux 金丹篇

做者：水濤
追求技術，但又不失生活的樂趣，過本身想要的生活

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的映射