why redux?

• 隨著 JavaScript 單頁(yè)應(yīng)用開(kāi)發(fā)日趨復(fù)雜,管理不斷變化的 state 非常困難
• Redux的出現(xiàn)就是為了解決state里的數(shù)據(jù)問(wèn)題
• 在React中，數(shù)據(jù)在組件中是單向流動(dòng)的
• 數(shù)據(jù)從一個(gè)方向父組件流向子組件(通過(guò)props)，由于這個(gè)特征，兩個(gè)非父子關(guān)系的組件（或者稱作兄弟組件）之間的通信比較麻煩

what is redux?

工作流

設(shè)計(jì)思想

• Redux是將整個(gè)應(yīng)用狀態(tài)存儲(chǔ)到到一個(gè)地方，稱為store
• store里面保存一棵狀態(tài)樹(shù)(state tree)
• 組件可以派發(fā)(dispatch)行為(action)給store,而不是直接通知其它組件
• 其它組件可以通過(guò)訂閱store中的狀態(tài)(state)來(lái)刷新自己的視圖.

三大原則

• 整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中，并且這個(gè) object tree 只存在于唯一一個(gè) store 中 State 是只讀的，惟一改變 state 的方法就是觸發(fā) action，
• action是一個(gè)用于描述已發(fā)生事件的普通對(duì)象 使用純函數(shù)來(lái)執(zhí)行修改，為了描述action如何改變state tree ，你需要編寫(xiě) reducers
• 單一數(shù)據(jù)源的設(shè)計(jì)讓React的組件之間的通信更加方便，同時(shí)也便于狀態(tài)的統(tǒng)一管理

how redux?

1.安裝

npm i redux -S 復(fù)制代碼

2.簡(jiǎn)單例子

1.引入

import {createStore} from 'redux'; //createStore 用來(lái)創(chuàng)建狀態(tài)倉(cāng)庫(kù) 復(fù)制代碼

2.創(chuàng)建state

let initState = {title: 'star' } 復(fù)制代碼

3.創(chuàng)建reducer

const CHANGETITLE = 'CHANGETITLE'; //action-todos function reducer(state= initState, action){switch(action.type){case CHANGETITLE: return state.title = action.title;}} 復(fù)制代碼

4.創(chuàng)建倉(cāng)庫(kù)

let store = createStore(reducer); 復(fù)制代碼

5.觸發(fā)dispatch中傳入action

store.dispatch({type: CHANGETITLE, title: 'xingxing'}) 復(fù)制代碼

完整代碼

import {createStore} from 'redux'; const CHANGETITLE = 'CHANGETITLE'; function reducer(state= initState, action){switch(action.type){case CHANGETITLE: state.title = action.title;}console.log(state); } let store = createStore(reducer); store.subscribe(()=>{ //訂閱事件，在dispatch時(shí)觸發(fā)console.log('render'); }) store.dispatch({type: CHANGETITLE, title: 'xingxing'}) 復(fù)制代碼

復(fù)雜些例子

在真實(shí)開(kāi)發(fā)中需要開(kāi)辟一個(gè)文件空間來(lái)管理倉(cāng)庫(kù)

• 文件結(jié)構(gòu)化
• 多reducer，合并reducer

1.actions

action-type.js

//action-type衡量,通過(guò)引入使用，減少拼寫(xiě)錯(cuò)誤引發(fā)的問(wèn)題 export const INCREMENT = 'INCREMENT' export const DECREMNET = 'DECREMNET' 復(fù)制代碼

actions/count.js

import * as types from "../action-types" //用于生成action let counter = {add(n){return {type: types.INCREMENT, count: n}} } export default counter 復(fù)制代碼

2.reducers

reducers/count.js

import {INCREMENT,DECREMENT} from '../actions/action-type' let initState = {count: 0 } function reducer(state = initState,action){switch(action.type){case INCREMENT:state.count = state.count + action.number;break;case DECREMENT:state.count = state.count - action.number;break;}return state } export default reducer 復(fù)制代碼

合并reducer

reducers/index.js

import todos from './todo'; import count from './count'; import {combineReducers} from 'redux' let reducers = combineReducers({todos,count }) export default reducers; 復(fù)制代碼

store/index.js 初始化倉(cāng)庫(kù)

import {INCEMENT,DECREMENT} from './actions/action-type'; import {createStore} from 'redux'; import reducers from './reducers'export default createStore(reducers); 復(fù)制代碼

how is redux work?

• redux的數(shù)據(jù)源是創(chuàng)建reducer時(shí)，傳進(jìn)去的initState。
• 為了避免state被隨意篡改，redux通過(guò)dispatch reducer來(lái)更改數(shù)據(jù)。
• redux可以通過(guò)subscribe訂閱狀態(tài)修改事件

//簡(jiǎn)單實(shí)現(xiàn) function createStore(reducer){let state;let listeners = [];function subscribe(listener){listeners.push(listener);return ()=> listeners = listeners.filter(fn=>fn!==listener);}function dispatch(action){listeners.forEach(listener=>listener());reducer(state, action)}dispatch({})function getState(){return state;}return {subscribe, dispatch, getState} } 復(fù)制代碼

合并reducer

function combineReducers(reducers){return (state={},action)=>{let newState = {};for(let key in reducers){let s = reducers[key](state[key],action);newState[key] = s;}return newState;} } 復(fù)制代碼

完整代碼

function createStore(reducer){let state;let listeners = [];function subscribe(listener){listeners.push(listener);return ()=>{listeners = listeners.filter(l=> l!==listener)}}dispatch({})function dispatch(action){state = reducer(state,action);listeners.forEach(l=>l());}function getState(){return state;}return {subscribe,dispatch,getState}; }function combineReducers(reducers){return (state={},action)=>{let newState = {};for(let key in reducers){let s = reducers[key](state[key],action); newState[key] = s;}return newState;} }export {createStore,combineReducers} 復(fù)制代碼

最近在研究redux，歡迎指出問(wèn)題。后續(xù)更新react-redux全家桶系列研究

總結(jié)

以上是生活随笔為你收集整理的再厉害的魔术也比不上真正的redux的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。