Redux

Redux是一個數據狀態管理插件；每一個系統都須要一個管理多組件使用的公共信息功能；例如，用戶登陸以後客戶端會存儲用戶信息userid和頭像等，而系統的每一個組件都須要用到這些信息，如收藏點評品論等。

基本使用：

1.定義計算規則，即reducer     在規則函數中，數據變化時要return一個新的值，而不能直接修改原來的值；使用了 不可變數據 的設計方式，來明確數據的變化時段，使得數據管理更清晰，複雜度更低。

function counter(state = 0,action){                    4.執行reducer，返回新的state，會更新到store tree中，－

　　switch(action.type){                                        －>到步驟1  觸發由store.subscribe()註冊的全部的listener

　　　　case 'INCREMENT':

　　　　　　　　return state+1      

　　　　case 'DECREMENT':

　　　　　　　　return state-1

　　　　default:

　　　　　　　　return state

　　}

}

2.根據計算規則生成 store,根據計算規則建立store規則文件       2Redux經過全局惟一的store對象管理項目中的state

let store = createStore(counter，initialState)                 

3.定義數據（即state）變化以後的派發規則         1經過store註冊listener，註冊的listener會在store tree 每次變動後執行

store.subscribe(() => {                               

　　console.log('current state',store.getState())

})

4.觸發數據變化                                 3 更新store tree ：store調用dispatch,經過action吧變動的信息傳遞給reducer   var action={type:...};store.dispatch(action); 

store.dispatch({type:'INCREMENT'})

store.dispatch({type:'INCREMENT'})

store.dispatch({type:'DECREMENT'})

 

Redux是一個管理數據的工具，咱們建立一個store變量來管理數據。建立store的前提是設定一個管理規則counter，默認state是0。

用store來管理數據，具體的管理形式是什麼？

a.要經過一個函數來觸發數據的變化，即dispatch，遵照以前的規則。

b.數據一旦發生變化，會致使什麼樣的後果，即執行subscribe中定義的函數

c.如何取到當前的數據，即store.getState()

 

Redux和React集成

1建立store，第一個參數是規則，第二個參數是初始化的數據window.STATE_FROM_SERVER(從服務器接受數據做爲本地的初始化數據)，第三個參數是可調起的chrome擴展程序redux-devtools

const store = createStore(rootReducer,initialState,

　　window.devToolsExtension ? window.devToolsExtension() : undefined      觸發redux-devtools

 )

b.建立規則Reducer, 現實中，數據結構複雜太多，必須分組管理。須要用state.userinfo來表示用戶數據，state.nav表示導航數據，state.ad表示廣告數據......

c.建立action，實際應用中，須要一些函數將它分封起來，即./app/actions中的文件，咱們把每一個業務操做都封裝爲一個函數，接收data，－－>再根據reducer的規則對data進行分裝，－－>最後返回給dispatch來處理。

 

 

 

react-redux介紹：鏈接react和redux

 react-redux是一個輕量級的封裝庫，其核心方法兩個：Provider和connect

一  Provider:1 在原應用組件上包裹一層，使原來整個應用成爲provider的子組件。

　　　　　　2 接受Redux的store做爲props，經過context對象傳遞給子組件上的connect

　　　　　<Provider store={store}>...</Provider>

二 connect：1包裝原組件，將state和action經過props的方式傳入到原組件內部。

　　　　　　2監聽store tree 的變化，使其包裝的原組件能夠響應state變化

參考：http://www.cnblogs.com/hhhyaaon/p/5860159.html

 

fetch獲取／提交數據，及開發環境下的數據Mock

fetch是一種可代替ajax獲取／提交數據的技術，window.fetch。原生支持promise。

1安裝：npm install whatwg-fetch --save   兼容老版本npm install es6-promise --save

2 使用：get

var result = fetch('url',{

　　　　　　　　　　　　credentials:'include',    //表示跨域請求時能夠帶cookie

　　　　　　　　　　　　hearders:{

　　　　　　　　　　　　　　'Accept':'application/json,text/plain,*/*'

　　　　　　　　　　　　　　}});

fetch方法返回的就是一個promise對象，

result.then(res => {return res.text() }).then(text =>  console.log(text)})　　

或result.then(res => {return res.json() }).then(json => console.log(json)}}

其中res.text()和res.json()是將返回的Response數據轉換成字符串 或 JSON格式

3 post

var result = fetch('url',{

　　methor:'POST',

　　credentials:'include',

　　headers:{

　　　　'Accept':'application/json,text/plain,*/*',

　　　　'Content-Type':'application/x-www-form-urlencoded'

　　},

　　body:'a=10&b=20'

});

 

數據模擬Mock

先後端分離式開發，對於後端數據使用三種模擬方式：

1 模擬靜態資源數據：即按照既定的數據格式寫JSON，用相關工具作接口fis3

2 模擬動態接口：本身用一個web框架，按照既定的接口和數據結構要求，模擬後端接口的功能，讓項目帕奧起來。

3 轉發線上接口：直接用代理獲取線上的數據，適用於成熟項目。

用2 koa作接口模擬：

a 安裝npm install koa koa-body koa-router --save-dev

b  在目錄 ./mock下寫koa代碼

c 訪問localhost：3000

 

回到Redux來

http://cn.redux.js.org/docs/introduction/ThreePrinciples.html

Redux的三個基本原則：

1 單一數據源

整個應用的state被存儲在一棵object tree中，而且這個object tree只存在於惟一一個store中。

2 State是隻讀的

惟一改變state的方法就是觸發action，action是一個用於描述已發生事件的普通對象。

3 使用純函數開執行修改 reducers

爲了描述action如何改變state tree,須要編寫reducers

###Action

action是把數據從應用層傳到store的有效載荷，它是store數據的惟一來源。經過store.dispatch()將action傳到store.

action本質是js普通對象，其內部必須使用type來表示將要執行的動做。

import {ADD_TODO,REMOVE_TODO} from '../actionTypes'

{type:ADD_TODO,text:'Build my first Redux app'}--->實際項目中把生成的惟一ID做爲數據引用標示

type表達用來處理state數據的方式。

#Action建立函數  就是生成action的方法 

　　　　function addTodo(text){return {type:ADD_TODO,text}}

redux提供的combineReducers() 方法將reducer合併；var rootReducer = combineReducers({films:filmReducer,filter:filterReducer});

###Store 

職責：1 維持應用的state；

2 提供store.getState()方法獲取state;

3 store.dispatch(action)方法將action對象發送給reducer進行處理；能夠很好的對state進行統一管理；

4 store.subscribe(listener)註冊監聽器,當有state數據更新時，將會觸發；

5 subscribe(listener) 返回的函數註銷監聽器

redux提供了createStore()方法來生產Store，其中有三個可訪問閉包變量的共有方法：dispatch,subscribe,getState

var actionCreators = bindActionCreators(actionCreators,store.dispatch);

 

===================================

Action 的異步解決方法

一  redux-thunk 中間層作數據異步轉換 

redux-thunk配置：redux-thunk經過redux提供的中間件applyMiddleware,綁定到store 中。

import { creactStore,applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import  reducers from '../reducers';

let store = creactStore(
    reducers,
    applyMiddleware(thunk)
);

render(
　　<Provider store={store}>
　　　　...
　　</Provider>,
　　document.querySelector('#app'));

Action 使用redux-thunk

獲取數據方法在異步獲取數據後須要再次調用接收方法接收數據。

//接收方法
let receiveSomething = (res) => {
    return {
            type:RECEIVE_SOME,
            res
            }
}

// 獲取數據方法
export  let fetchSomething = (args) => {
        return dispatch => {
                return fetch(args).then((res) => {
                        return dispatch(receiveSomething(res))
                    })
                }
        }

2 將state綁定到component 

使用react-redux提供的connect方法將組件和所需數據綁定。

let mapStateToProps = (state) => {
    ....}
const FilterLink = connect(mapStateToProps,mapDispatchToProps)(ComponentA)
export default FilterLink

　　

 ==============================

import { PropTypes } from 'react'

import { combineReducers } from 'redux'         合併子reducer     const todoApp = combineReducer({todos,filter})

import { connect } from 'react-redux'     將state綁定到component

import { creactStore } from 'redux'            const store = creactStore(reducer)

import { Provider } from 'react-redux'        <Provider store={store}>