目錄

• 1. redux 是什麼？
• 2.redux的原理
• 3. 如何使用 redux？
• (1).安裝redux，建立redux資料夾，建立store.
• (2).建立reducers.js
• (3).引入store.subscribe
• (4). 引入react-redux

1. redux 是什麼？

React 只是 DOM 的一個抽象層，並不是 Web 應用的完整解決方案。react只是一個輕量級的檢視層框架，如果要做大型應用就要搭配檢視層框架redux一起使用。主要引用於多互動、多資料來源的場景，並不是必須使用，但是必須要會。

2.redux的原理

redux的原理，首先用一張圖來說明，很容易理解

首先，使用者發出 Action。

store.dispatch(action);

然後，Store 自動呼叫 Reducer，並且傳入兩個引數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。

let nextState = todoApp(previousState,action);

State 一旦有變化，Store 就會呼叫監聽函式。

// 設定監聽函式
store.subscribe(listener);

listener可以通過store.getState()得到當前狀態。如果使用的是 React，這時可以觸發重新渲染 View。

function listerner() {
  let newState = stor
 
e.getState();
  component.setState(newState);   
}

3. 如何使用 redux？

(1).安裝redux，建立redux資料夾，建立store.js

該檔案專門用於暴露一個store物件，整個應用只有一個store物件

安裝redux:yarn add redux / npm install redux

//引入createStore，專門用於建立redux中最為核心的store物件
import {createStore，applyMiddleware} from 'redux'
//引入為Count元件服務的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用於支援非同步action
import thunk from 'redux-thunk'
//暴露store  
//applyMiddleware 是中間位 中使用thunk
export default createStore(countReduchttp://www.cppcns.com
 
er,applyMiddleware(thunk))

(2).建立reducers.js

• 1.該檔案是用於建立一個為Count元件服務的reducer，reducer的本質就是一個函式
• 2.reducer函式會接到兩個引數，分別為：之前的狀態(preState)，動作物件(action)

const initState = 0 //初始化狀態
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//從action物件中獲取：type、data
	const {type,data} = action
	//根據type決定如何加工資料
	switch (type) {
		case 'increment': //如果是加
			return preState + data
		case 'decrement': //若果是減
			return preState - data
		default:
			return preState
	}
}

(3).引入store.subscribe

主要用subscribe監聽store中每次修改情況

// 公共 index.js
import store from './redux/store'

//subscribe當store中資料發生變化就會更新資料,寫在這裡是讓全域性擁有
store.subscribe(()=>{
	ReactDOM.render(<Appwww.cppcns.com/>,document.getElementById('root'))
})

(4). 引入react-redux

react-redux是redux作者封裝的一個庫,是第三方模組,對Redux進一步簡化,提供了一些額外的API(例如:Provider,connect等),使用它可以更好的組織和管理我們的程式碼,在React中更方便的使用Redux。

下載 react-redux

建立count 檔案

//引入Count的UI元件
import CountUI from '../../components/Count'

//引入connect用於連線UI元件與redux
import {connect} from 'react-redux'

-------------------------------------------------------------
/* 
	1.mapStateToProps函式返回的是一個物件；
	2.返回的物件中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
	3.mapStateToProps用於傳遞狀態
*/
function mapStateToProps(state){
	return {count:state}
}
-----------------------------------------------------------------
/* 
	1.mapDispatchToProps函式返回的是一個物件；
	2.返回的物件中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
	3.mapDispatchToProps用於傳遞操作狀態的方法
*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),jian:number => dispatch(createDecrementAction(number)),jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),}
}
//使用connect()()建立並暴露一個Count的容器元件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
//改良
export default connect(
	state => ({count:state}),//mapDispatchToProps的一般寫法
	/* dispatch => ({
		jia:number => dispatch(createIncrementAction(number)),}) */

	//mapDispatchToProps的簡寫
	{
		jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createInhttp://www.cppcns.comcrementAsyncAction,}
)(Count)

生成action物件,並分別暴露

/* 
	該檔案專門為Count元件生成action物件
*/
import {INCREMENT,DECREMENT} from '../constant'

//同步action，就是指action的值為Object型別的一般物件
export const increment = data => ({type:INCREMENT,data})
export const decrement = data => ({type:DECREMENT,data})

//非同步action，就是指action的值為函式,非同步action中一般都會呼叫同步action，非同步action不是必須要用的。
export const incrementAsync = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(increment(data))
		},time)
	}
}

到此這篇關於redux工作原理講解及使用方法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。