React----redux學習總結

標籤：change   div   create   組件   唯讀   輸入   流程   工作流程   代碼   

redux:

　　redux是flux的進階版，相較與flux 更加方便，其內部封裝了flux的一些方法，使可以快速的完成資料的互動

1、使用情境
　　大型項目
　　多模組，多資料
2、安裝 cnpm install redux --save-dev
3、工作流程：
　　當組件需要改變store資料的時候，需要先建立一個action，通過dispatch將action傳給Store，store會將action轉寄給reducer，在reducer內部進行資料的結合（previousState和state），然後產生一個新的 資料結構傳遞給store，發生改變，view也隨之改變
4、代碼操作流程
　　1、建立Store   

import {createStore} from ‘redux‘/*redux內部有createStore方法*/import reducers from ‘...‘const store = createStore(reducers)export default store /*組件中引入 Store*/import Store from ‘....‘constructor(){　　super()this.state=Store.getState}

　　列印一下Store

 

可以看到Store中包含有 

(1)、dispatch：用來傳遞action(2)、getState：傳回值就相當於this.state中的資料,裡面存放著公用的資料(3)、replaceReducer：(4)、subscribe：監聽資料的改變，必須傳遞一個函數(5)、Symbol(observable)：

2、建立reducers　　　

　　官方解釋reducer:　　Reducer 只是一些純函數，它接收先前的 state 和 action，並返回新的 state。剛開始你可以只有一個 reducer，隨著應用變大，你可以把它拆成多個小的 reducers，分別獨立地操作 state tree 的不同部分，因為 reducer 只是函數，你可以控制它們被調用的順序，傳入附加資料，甚至編寫可複用的 reducer 來處理一些通用任務，如分頁器　　 三大原則 　　1、必須有一個初始的資料 defaultState 　　2、必須返回純函數 （輸入一定 ，輸出一定） 　　3、state是唯讀，不可以被直接修改，唯一改變state的方法就是觸發action，action是一個用於描述已發生事件的普通對象

　　　　　　　　　　const defaultState = {                    inputVal:‘‘,                    list:‘‘                }                export default (state=defaultState,action)=>{
　　　　　　　　　　　/*

　　　　　　　　　　　　　　　 這個函數裡面有2個參數一個是state，另一個是action。　　　　　　　　　　　　　state指的是store中的資料　　　　　　　　　　　　　action指的是View修改資料的時候傳遞過來的action

　　　　　　　　　　 */                    switch (action.type) {                        case ‘CHANGE_ITEM‘:                            const changState = JSON.parse(JSON.stringify(state))                            changState.inoutVal=action.val                            return changState                            break;                                            default:                            return state                    }                }

3、建立action

 

cosnt action = {      type:‘CHANGE_ITEM‘，      value：‘’          }

 

通過Store.dispatch(action)  將action傳遞給reducers  reducers進行資料的更新

 

4、組件中進行資料更新

Store.subscribe(this.hangdleChangeUpadata.bind(this))    hangdleChangeUpadata(){                                  this.setState(Store.getState)                }

 

 

 

React----redux學習總結