1.web應用是乙個狀態機,試圖與狀態是一一對應的.
2.所有的狀態,儲存在乙個物件裡.
1.store
store就是儲存資料的地方,你可以把它看成乙個容器,整個應用只能有乙個store.
redux提供createstore這個函式,用來生成store.
import from 'redux';
const store = createstore(reducer);
createstore函式接受另乙個reducer函式作為引數,返回新生成的store物件.
state物件包含所有資料,如果想得到某個時點的資料,就要對store生成快照,這種時點的資料集合,
就叫做state.當前時刻的state,可以通過store.getstate()拿到.
const state = store.getstate();state的變化,會導致view的變化,但是,使用者接觸不到state,只能接觸到view,所以.stated的變化必須是view導致的.action就是view發出的通知,表示state應該要發生變化了.
action是乙個物件,其中的type屬性是必須的,表示action的名稱,其他屬性可以自由設定.
const action = ;可以這樣理解,action描述當前發生的事情,改變state的唯一方法,就是使用action,它會運送資料到store.
4.action creator
view要傳送多少種資訊,就會有多少種action,可以定義乙個函式生成action,這個函式就叫actioncreator.
const add_todo = '新增 todo';
function addtodo(text)
}
store.dispatch()是view發出action的唯一方法.
store.dispatch(addtodo('learn redux'));store收到action以後,必須給出乙個新的state,這樣view才會發生變化.
這種state的計算過程就叫做reducer.
reducer是乙個函式,他接受action和當前state作為引數,返回乙個新的state.
export default (state = 0, action) =>
}
也可以根據action的不同來實現.
實際應用中,reducer函式不用像上面這樣手動呼叫,store.dispatch方法會觸發reducer的自動執行.
為此,store需要知道reducer函式,做法就是生成store的時候,將reducer傳入createstore方法.
const store = createstore(reducer);就會自動呼叫reducer,得到新的state.
7.純函式
reducer函式最重要的特徵是,它是乙個純函式,也就是說,只要是同樣的輸入,必須得到同樣的輸出.
由於reducer是純函式,就可以保證同樣的state,必定得到同樣的view,但正因為這一點,reducer函式裡面不能改變
state,必須返回乙個全新的物件.
return object.assign({}, state, )
export default (state = 0, action) =>
}
store允許使用store.subscribe方法設定監聽函式,一旦state發生變化,就自定執行這個函式.
store.subscribe(listener);let unsubscribe= store.subscribe(() => console.log(store.getstate()));
unsubscribe();
1.store.getstate(),store.dispatch(),store.subscribe()
let = createstore(reducer);必然十分龐大,導致reducer函式也十分龐大.
redux提供了乙個combinereducers方法,用於reducer的拆分,你只要定義各個子render函式,
然後用這個方法,將它們合成乙個大的reducer.
import from 'redux';
const chatreducer = combinereducers()
store.dispatch(action);3.state一旦有變化,store就會呼叫監聽函式.
store.subscribe(listener);function listerner()import react, from 'react';
import from 'react-dom';
import reducer from '../reducers/reducer.js';
import from 'redux';
const store = createstore(reducer);
constructor(props) ;
}handleadd = () => );
}handledel = () => );
}handleget = () => )
}handleajax = () => );
}).catch((err) => );})}
render() )
});return (
adddel
獲取資料
獲取ajax資料);}
}
export default (state = 0, action) => , state, );case 'decrement':
return object.assign({}, state, );
case 'getsource':
return object.assign({}, state, );
case 'ajax':
return object.assign({}, state, )
case 'ajaxerror':
return object.assign({}, state, );
default:
return state
}}
自己實現React Redux
redux 官方提供的 react 繫結庫。具有高效且靈活的特性。1 首先provider是乙個頂層容器元件，接收乙個store引數 import react from react import proptypes from prop types export default class provi...
react redux的實現原理
react redux框架可以用來對react native進行資料流管理。redux是乙個用於ui布局框架的標準庫。redux的概念是通過ui binding來將redux和react繫結到一起，這樣可以避免ui 部分和store直接互動。從元件布局來講，當我們在構建乙個大型元件，且內部每個小模組...
詳細簡單的搭建react redux
最近完成vue的學習，轉過頭來學習react，按照vue的思想,先過幾遍官網文件，熟悉一下語法，然後就直奔路由，路由我是一路踩一坑，給我是弄的頭大的很，一看react官網什麼也沒有提，redux也是什麼也沒有，默默的流下新手不友好的眼淚。進入正題，在學習react redux之前，需要了解乙個red...