Redux

1、核心概念

????Redux的主要目的，即集中且可預測的管理數據。集中管理指：將所有需要管理的數據放到一個store中進行管理。可預測指：數據的變化可以預測。為了實現這個功能，Redux將數據的操作全部交給了reducer來管理，而在action中定義數據處理的動作。這樣當你的數據處理動作action傳過來時，store便已經知道將要對數據進行的處理。在Redux中主要有三個內容，分別是store,action以及reducer。

• 1、store：連接reducer和state，并且為處理數據提供接口，
• 2、action：描述對數據處理的動作，是store 數據的唯一來源
• 3、reducer：接收 state 和 action，并返回新的 state 的函數。

三大原則

• 單一數據源：整個應用的state被儲存在一棵object tree中，并且object tree只存在于唯一一個store中。

避免數據被修改，以及確定唯一的修改數據的方法就是訪問store。

• State 是只讀的：唯一改變state的方法就是觸發action，action是一個用于描述已發生事件的普通對象。

對store外部來說，只能訪問state數據，而不能修改，確保state不被其他的方法修改，而所有的數據修改方法都被reducer集中化處理。

• 使用純函數來執行修改：為了描述 action 如何改變 state tree，你需要編寫 reducers。

action描述處理數據這件事，對數據的處理是在reducer內完成的，接收先前的state以及action，并返回新的state。

使用Redux的步驟

以counter計數器為例，

1、創建state對象

????對應第一個原則，單一數據源，在Redux中所有的對象都被保存在一個單一的對象中,

在store.js文件中先定義所需的對象，如下：

const state = {counter:99, } 復制代碼

2、定義action

• 官網：Action是把數據從應用傳到store的有效載荷。它是store數據的唯一來源。一般來說你會通過store.dispatch()將action傳到store。
• 簡單來說就是要求store處理數據的信號，對于不同的信號reducer對數據進行不同的處理。

實現加減操作，定義如下：

//實現加的increment操作： const increment ={type = 'INCREMENT' } // 減操作的action const decrement = {type: 'DECREMENT' } 復制代碼

• action創建函數，就是創建action的方法，只是簡單的返回一個action。 如下,定義的increment()函數，返回的就是簡單的一個action，方法內的text可以定義每次修改的數值的多少。

//返回加操作的action function increment(text) {return {type: 'INCREMENT',text} } // 減操作decrement的action function decrement() {return {type: 'DECREMENT',} } 復制代碼

3、定義reducer

• reducer的職責就是根據不同的action來處理數據。根據第三條規則，使用純函數來執行修改。

對于純函數必須遵守以下約束。

• 不得改寫傳入的參數
• 不能調用系統I/O的API（如DOM操作、http請求）
• 不能調用不純的方法（如Date.now()或者Math.random()）。

對于計數器案例，定義的reducer如下，

function reducer(state = initState, action) {switch (action.type) {case 'INCREMENT':return { count: state.count + action.text }case 'DECRMENT':return { count: state.count - 1 }default:return state} } 復制代碼

需要注意

• 不能修改state，
• 在default的情況下返回舊的state

當數據量多時需要對數據進行拆分處理，可以定義多個reducer,然后進行合并。

function reducer(state = state,action){return{//狀態：reducer（state.狀態，action），todos:todos(state.todos,action),visibility:visibility(state.todos,action)} } 復制代碼

4、創建store，并使用

store提供了三個API接口，分別是

• getState：用于獲取狀態
• dispatch：用于派發action
• subscribe：當狀態發生變化時執行的回調函數

//可在創建store時，也可在定義reducer時，初始化數據 const store = Redux.createStore(reducer,state) 復制代碼

使用回調函數,以及執行函數：

store.subscribe(() => {console.log(`現在的狀態為：${store.getState().count}`) }) store.dispatch(increment(1)) store.dispatch(increment(3)) store.dispatch(decrment()) 復制代碼

react-redux

• react-redux是鏈接react與redux的專用庫。在使用時需要格外安裝。學習react-redux最主要的就是學習其中的三個一，一種開發思想，一個connect方法，以及一個provide組件。
• 1、一種開發思想：組件分離思想

react-redux提出了“智能”組件和“笨拙”組件相分離的開發思想，

• “智能”組件，即容器組件，主要特點有：（1）負責管理數據和業務邏輯，不負責UI的呈現，（2）帶有內部狀態，（3）使用redux的API。
• “笨拙”組件，又稱展示組件，特點：（1）只負責UI的呈現， 不帶有任何的業務邏輯，（2）沒有狀態，（3）所有數據由參數（this.props）提供，（4）不適用redux的API。
• 2、一個connect方法：將“笨拙”組件，變成“智能”組件。

react-redux提供了一個connect方法，用于從“笨拙”組件生成容器組件。 其中狀態，是指state數據，邏輯，是指修改state的方法.

• 3、一個provider組件：為后代組件提供store對象。 在使用connect方法時，用到了store對象的dispatch方法，那么此時我們就需要使用provide組件，將store傳遞過去了。

還是以counter計數器為例，但是這次使用腳手架create-react-app的方式：

//安裝腳手架create-react-app： npm i create-react-app -g //創建項目 create-react-app counter //安裝react-redux npm i redux react-redux //然后啟動項目 npm start 復制代碼

counter案例：

1、先定義組件

//定義Show組件 export default class Show extends React.Component{render() {return (<h2>counter:{this.props.counter}</h2>)} } //定義Add組件，Sub組件與Add組件一樣 export default class Add extends Component{render() {return (<button>+</button>)} } //定義counter組件，顯示內容 class Counter extends Component {render() {return (<div><Show/><p><Add/>&nbsp;<Sub/>&nbsp;</p></div>)} } 復制代碼

2、創建store

• 1、定義store以及action creators

//定義store const state = {counter:6,} //定義increment的action，定義decrement的action與其類似。 export function increment() {return {type: 'INCREMENT'} } 復制代碼

• 2、定義reducer以及合并

export default function counter(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1default:return state} } //合并reducer const reducer = combineReducers({counter// 當名字相同時，可以省略 }) 復制代碼

• 3、創建store

//可以在創建store時初始化數據 const store = createStore(reducer,state,) //在使用框架，在不同的文件夾下寫模塊時，要記得導出以及導入你需要的數據。 export default store 復制代碼

• 4、使用connect轉化組件 在使用connect時，需要先導入必要的方法

import { connect } from 'react-redux' //導入actions內的所有方法，并命名為action import * as actions from '../actions/films' import { bindActionCreators } from 'redux'; 復制代碼

在導入必要的方法后，才能使用。

// 定義mapStarteTopProps，建立從state到props對象的映射，接受state作為參數 function mapStarteTopProps(state) {return {counter: state.counter}} // 定義mapDispatchToProps，用于建立笨拙組件的參數到store.dispatch方法的映射，以dispatch為參數 function mapDispatchToProps(dispatch) {return bindActionCreators(action, dispatch)} // 將Counter變成容器組件并導出，需要在頂層使用 provide組件，引入store，這樣在子組件內就可以使用store了。 export default connect(mapStarteTopProps, mapDispatchToProps)(Counter) 復制代碼

• 5、使用provider組件，傳遞store

//需要導入必要的包 import { Provider } from 'react-redux'; import store from './store' import Counter from './containers/Counter'; //再使用provider方法 ReactDOM.render(// 將store集成到react應用的頂層props里面，然后使用provider組件傳遞。這樣各個子組件就能訪問到頂層的store對象了<Provider store={store}><Counter /></Provider>, document.getElementById('root')); registerServiceWorker(); 復制代碼

• 6、在各個子組件使用方法和屬性

部分修改如下：

//在Add組件內使用increment方法 export default class Add extends Component{render() {return (<button onClick={()=>this.props.increment()}>+</button>)} } //修改Counter組件，顯示數據，以及給子組件傳遞方法 class Counter extends Component {render() {return (<div><Show counter={this.props.counter} /><p><Add increment={this.props.increment} />&nbsp;<Sub decrement={this.props.decrement} />&nbsp;</p></div>)} } 復制代碼

• 測試如下：

在react-redux中實現異步操作

• 定義異步的action creator函數

在異步action中，返回一個函數，在該函數中去調用同步的action即可。 這個函數，會自動的獲取dispatch和getState。

//定義異步操作，在點擊后兩秒實現加操作 export function incrementAsync() {return function (dispatch, getState) {setTimeout(function () {dispatch(increment());}, 2000)} } 復制代碼

• 先前已經定義好了框架，現在只需在定義好的框架內，定義方法以及調用方法即可。

//在Counter內傳遞方法 <AsyncAdd incrementAsync={this.props.incrementAsync} //在Async組件內使用方法 export default class AsyncAdd extends Component {render() {return (<button onClick={() => this.props.incrementAsync()}>+async</button>)} } 復制代碼

• redux默認是不支持異步action的，因此我們需要使用中間件來強化store，讓Reducer 在異步操作結束后自動執行。

//安裝實現異步操作的中間件redux-thunk npm i redux-thunk -S 復制代碼

• 使用中間件：

//先從redux-thunk內導入需要的方法 import thunkMiddleware from "redux-thunk" // 在createStore方法上使用使用thunkMiddleware方法強化store const createStoreWithMiddleware = applyMiddleware(thunkMiddleware )(createStore) const store = createStoreWithMiddleware(reducer,state,) 復制代碼

這樣就可以在redux內實現異步操作了。

轉載于:https://juejin.im/post/5b7783b4f265da435b0b251c

總結

以上是生活随笔為你收集整理的小白路程之----初学React语法栈之redux与react-redux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。