why redux?

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

what is redux?

工作流

設(shè)計思想

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

三大原則

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

how redux?

1.安裝

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

2.簡單例子

1.引入

import {createStore} from 'redux'; //createStore 用來創(chuàng)建狀態(tài)倉庫 復(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)建倉庫

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時觸發(fā)console.log('render'); }) store.dispatch({type: CHANGETITLE, title: 'xingxing'}) 復(fù)制代碼

復(fù)雜些例子

在真實開發(fā)中需要開辟一個文件空間來管理倉庫

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

1.actions

action-type.js

//action-type衡量,通過引入使用，減少拼寫錯誤引發(fā)的問題 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 初始化倉庫

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時，傳進去的initState。
• 為了避免state被隨意篡改，redux通過dispatch reducer來更改數(shù)據(jù)。
• redux可以通過subscribe訂閱狀態(tài)修改事件

//簡單實現(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，歡迎指出問題。后續(xù)更新react-redux全家桶系列研究

總結(jié)

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

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