核心概念
- action 動(dòng)作對(duì)象峻汉。分為同步action，就是指action的值為Object類型的一般對(duì)象嗓奢；異步action除呵，就是指action的值為函數(shù),異步action中一般都會(huì)調(diào)用同步action鹉动，異步action不是必須要用的轧坎。
import {INCREMENT,DECREMENT} from './constant'
//同步action，就是指action的值為Object類型的一般對(duì)象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
//異步action泽示，就是指action的值為函數(shù),異步action中一般都會(huì)調(diào)用同步action缸血，異步action不是必須要用的蜜氨。
export const createIncrementAsyncAction = (data,time) => {
return (dispatch)=>{
setTimeout(()=>{
dispatch(createIncrementAction(data))
},time)
}
}
- reducer 本質(zhì)就是一個(gè)函數(shù) 會(huì)接到兩個(gè)參數(shù)，分別為：之前的狀態(tài)(preState)属百，動(dòng)作對(duì)象(action)
定義方式如下：
const initState = 0 //初始化狀態(tài)
export default function countReducer(preState=initState,action){
// console.log(preState);
//從action對(duì)象中獲燃侨啊：type、data
const {type,data} = action
//根據(jù)type決定如何加工數(shù)據(jù)
switch (type) {
case 'increment': //如果是加
return preState + data
case 'decrement': //若果是減
return preState - data
default:
return preState
}
}
- store 整個(gè)應(yīng)用只有一個(gè)store對(duì)象族扰，通過(guò) createStore()這個(gè)方法創(chuàng)建
中間件的引入
要實(shí)現(xiàn)如異步action的需求，一般還需要引入中間件
import {applyMiddleware} from 'redux'
//還需引入redux-thunk定欧，用于支持異步action
import thunk from 'redux-thunk'
export default createStore(reducer,applyMiddleware(thunk))
匯總reducer
一般復(fù)雜應(yīng)用會(huì)將reducer拆分為多個(gè)文件渔呵，需要將它們匯總起來(lái)
import {combineReducers} from 'redux'
//匯總所有的reducer變?yōu)橐粋€(gè)總的reducer
const allReducer = combineReducers({
countReducer,
personReducer
})
數(shù)據(jù)共享（多個(gè)組件中都可訪問(wèn)store中的數(shù)據(jù)）
引入Provider組件，包裹需要訪問(wèn)的所有組件（一般為根組件）
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
)
