定義：

　　Redux是狀態統一管理容器，為了解決不同元件之間狀態不統一的問題。

特點：

　　Redux的資料流動是單向的，形成一個閉環迴圈。

如上圖：我們從元件作為切入點，元件的狀態值從Store獲取到，如果想改變Store中的值，禁止直接逆向操作，只能先通過dispatch方法傳入物件型別的action，再將action傳入reducer函式中，reducer函式是唯一可以操作store中state值的角色，它包含兩個引數，第一個state, 第二個action, 如此迴圈形成一個單向閉環，這就是單向資料流。

實操：

一：建立一個react專案demo

npx create-react-app redux_demo

二：開啟專案，執行專案

cd .\redux_demo\
npm start

三：安裝Redux

npm install redux --save-dev

四：將根目錄下的index.js檔案中的程式碼替換為下面程式碼

import { createStore } from 'redux';

function default_reducer(state = {}, action) { // 初始化state為空物件
    switch (action.type) {  // 定義action
      case 'setName':
        return {
          ...state,
          name: action.value
        }
      
 
default: 
        return state
    }
};

let store = createStore(default_reducer); 

console.log('初始值', store.getState());
console.log('///////')

store.dispatch({              // 修改值
    type: 'setName',
    value: 'bar' 
})   
console.log('修改後的state值', store.getState());

五：新增監聽state變化的訂閱功能

import { createStore } from
 
 'redux';

function default_reducer(state = {}, action) { // 初始化state為空物件
    switch (action.type) {  // 定義action
      case 'setName':
        return {
          ...state,
          name: action.value
        }
      default: 
        return state
    }
};

let store = createStore(default_reducer); 

store.subscribe(() => {   //監聽到state修改後會自動執行
  console.log('當前state值', store.getState());
});


store.dispatch({              // 修改值
    type: 'setName',
    value: 'bar' 
})  

store.dispatch({              // 修改值
  type: 'setName',
  value: 'others' 
})