react和redux之間的關係

前提警示：react、redux之間沒有本質關係，redux能夠結合其餘庫使用。redux數據管理方式跟react的數據驅動視圖理念很合拍,一塊兒使用，開發更加的便利高效

適用場景

• 小型項目 react 數據管理props state便可知足需求
• 組件嵌套共享數據 中間件redux

redux 中的store

• 存放一個數據對象
• 外界能訪問到這個數據
• 外界也能修改這個數據
• 當數據有變化的時候，通知對應組件修改狀態

store的工做流程

• What：想幹什麼 --- dispatch(action)
• How：怎麼幹，乾的結果 --- reducer(oldState, action) => newState
• Then?：從新執行訂閱函數（好比從新渲染UI等）
• 這樣就實現了一個store，提供一個數據存儲中心，能夠供外部訪問、修改等，這就是Redux的主要思想。。

redux 使用流程

• 下載 npm i redux -S
• src新建store文件夾，並新建子文件index.js / reducer.js

// index.js  入口文件建立store實例
    import {createStore} from 'redux'
    import reducer from './reducer.js'
    const store = createStore(reducer);
    export default store;
    // reducer.js  處理數據
    const defaultState={
        carList:[]
    }
    export default (state=defaultState, action)=>{
        // 拷貝數據 修改數據 返回數據
        const newState = JSON.parse(JSON.stringify(state))
        if(action.type == 'add_car_item'){
            newState.carList.push(action.data);
            return newState;
        }
        return state;
    }

• 頁面中須要訪問store引入

import store from '../store/index'

• 須要修改數據的文件 定義action（類型，值）store觸發 store.dispatch(action)
• 從store中取值

import store from '../store/index'
    export default class Car extends Component {
        constructor(props){
            super(props)
            this.state = store.getState();
            // 監聽store數據變化
            this.watch = store.subscribe(this.changeState.bind(this))
        }
        render() {
            return (
                <div>
                    我是購物車頁
                </div>
            )
        }
        changeState(){
            this.setState(store.getState())
        }
        componentWillUnmount(){   
            this.watch();   // 取消監聽  防止內存泄漏
        }
    }

注：redux中的store 僅支持同步數據流。如需使store支持異步數據流，則需藉助redux-thunk等中間件。