redux是解決前端程式碼由於元件化引起的變數之間不能相互互動的的問題，readux是一個狀態管理的倉庫，阮老師說能不用redux就不用redux因為redux有時可能會出現卡頓現象。

上圖過程值實現了從倉庫中取出資料

react的特徵主要時：

1. 唯一資料來源 應用的狀態資料應該只儲存在唯一的一個Store上，即 State 樹。
2. 儲存狀態只讀 不能直接修改state的值，必須通過派發action物件完成。通過getState()獲取值

     3. 資料改變只能通過純函式 這裡的純函式就是

過程：

1、想在倉庫中初始話狀態

import {createStore} from "redux";
const ADD = "ADD";
const SUB = "SUB";
let initState = {//初始化變數
    number:0,
    name: 'zs'
};
function reducer(state=initState,action) {
    switch (action.type) {
        case ADD:
            return {number:action.number+1}
        case SUB:
            return {number:action.number-1}
        case 'reset':
            console.log(111,action);
            return {name:action.name}
    }
    return state;
}
let store = createStore(reducer);//建立倉庫
// window._store = store;
export default store
 

 2、建立好倉庫後獲取倉庫的變數，創庫中的裝填只能通過action修改才能保證創庫中狀態的安全性，在頁面中建立了action後要把這個action通過dispatch派發給store的reducer進行處理，reducer會根據action的type進行判斷然後做出不同的修改

import React from "react";
import store from "../store";
//元件更新 屬性更新 狀態更新,將redux中的資料轉化成自己的狀態
export default class Counter extends React.Component{
  
    add = ()=>{
        store.dispatch({type:'ADD',count:1})
      //通過dispatch派送方法把action物件派送到store中
    };
    minus = ()=>{
        store.dispatch({type:'MINUS',count:1})
    };
    render(){
        return (
            <div>
                <button onClick={this.add}>+</button>
                <p>{store.getState().number}</p>
                //通過store中的getState()方法獲取store中的值
                <button onClick={this.minus}>-</button>
            </div>
        )
    }
}
 

這樣的話對狀態樹中的值就修改完了。

也可以看一下這篇文章講的挺好的https://juejin.im/post/5b83be86f265da432a6ae5df

在專案中只使用redux是不能實現狀態的取和存這已完整的過程，使用redux只能完成從創庫裡面取出狀態，要想實現另一半過程還要從把頁面中的狀態存到store中要用到react-redux

所有容器元件都可以訪問 Redux store，建議的方式是使用指定的 React Redux 元件 來包裹，讓所有容器元件都可以訪問 store

react-redux主要時通過connect把元件與倉庫連線起來，connect中有四個引數，

connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) 

第一個引數的意思時從倉庫中對映到逐漸

function mapStateToProps(state) {
      return { todos: state.todos }
//todos是元件中的變數，state.todos是倉庫中的變數
    }

 第二個引數是派發到Props，也就是派發動作到倉庫

第三個引數mergeProps如果不指定，則預設返回 Object.assign({}, ownProps, stateProps, dispatchProps)，顧名思義，mergeProps是合併的意思，將state合併後傳遞給元件。

第四個引數：options：通過配置項可以更加詳細的定義connect的行為，通常只需要執行預設值。

可以參考https://juejin.im/post/5acb67fef265da23a049de90