redux 简明学习
核心概念
redux專注于狀態管理,把所有的狀態都存在一個對象中。核心概念包括:store、state、action、reducer
【store】
store是保存數據的地方,redux提供createStore函數來生成 Store。函數參數是后面要介紹的reducer
import { createStore } from 'redux' const store = createStore(reducer)【state】
state是store的某個時刻的快照,可以通過store.getState()取得當前時刻的state
const state = store.getState()【action】
action用來改變state。action是一個對象,其中的type屬性是必須的,其他的屬性一般用來設置改變state需要的數據
const action = {type: 'ADD_ONE',num: 1 }store.dispatch()是發出action的唯一方法
const action = {type: 'ADD_ONE',num: 1 } store.dispatch(action)【reducer】
reducer 是一個函數,它接受action和當前state作為參數,返回一個新的state
import { createStore } from 'redux' const store = createStore(reducer) const reducer = (state = 10, action) => {switch (action.type) {case 'ADD_ONE':return state + action.num;default: return state;} };當store.dispatch發送過來一個新的action,store就會自動調用reducer,得到新的state
簡單實例
多余的概念不再介紹,下面用上面介紹的這四個核心概念實現一個簡單的實例,將create-react-app中index.js文件內容更改如下,即可運行
//第一步,創建action const addOne = {type: 'ADD',num: 1 } const addTwo = {type: 'ADD',num: 2 } const square = {type: 'SQUARE' }//第二步,創建reducer let math = (state = 10, action) => {switch (action.type) {case ADD:return state + action.numcase SQUARE:return state * statedefault:return state} } //第三步,創建store import { createStore } from 'redux' const store = createStore(math)//第四步,測試,通過dispatch發出action,并通過getState()取得當前state值 console.log(store.getState()) //默認值為10store.dispatch(addOne) //發起'+1'的action console.log(store.getState()) //當前值為10+1=11store.dispatch(square) //發起'乘方'的action console.log(store.getState()) //當前值為11*11=121store.dispatch(addTwo) //發起'+2'的action console.log(store.getState()) //當前值為121+2=123結果如下
目錄結構
下面對目錄結構進行劃分
1、一般地,將action.type設置為常量,這樣在書寫錯誤時,會得到報錯提示
// constants/ActionTypes.js export const ADD = 'ADD' export const SQUARE = 'SQUARE'2、可以將addOne對象和addTwo對象整合成add函數的形式
// action/math.js import { ADD, SQUARE } from '../constants/ActionTypes' export const add = num => ({ type: ADD, num }) export const square = { type: SQUARE }3、根據action.type的分類來拆分reducer,最終通過combineReducers方法將拆分的reducer合并起來。上例中的action類型都是數字運算,無需拆分,只需進行如下變化
reducer/math.js // reducer/math.js import { ADD, SQUARE } from '../constants/ActionTypes' const math = (state = 10, action) => {switch (action.type) {case ADD:return state + action.numcase SQUARE:return state * statedefault:return state} } export default mathreducer/index.js
// reducer/index.js import { combineReducers } from 'redux' import math from './math' const rootReducer = combineReducers({math }) export default rootReducer4、將store存儲到store/index.js文件中
// store/index.js import { createStore } from 'redux' import rootReducer from '../reducer' export default createStore(rootReducer)5、最終,根路徑下的index.js內容如下所示
import store from './store' import {add, square} from './action/math'console.log(store.getState()) //默認值為10store.dispatch(add(1)) //發起'+1'的action console.log(store.getState()) //當前值為10+1=11store.dispatch(square) //發起'乘方'的action console.log(store.getState()) //當前值為11*11=121store.dispatch(add(2)) //發起'+2'的action console.log(store.getState()) //當前值為121+2=123最終目錄路徑如下所示
最終結果如下所示
?
UI層
前面的示例中,只是redux的狀態改變,下面利用UI層來建立view和state的聯系,將根目錄下的index.js的內容更改如下
import store from './store' import React from 'react' import ReactDOM from 'react-dom' import { add, square } from './action/math'ReactDOM.render(<div store={store}><p>{store.getState().math}</p><input type="button" onClick={() => store.dispatch(add(1))} value="+1" /><input type="button" onClick={() => store.dispatch(add(2))} value="+2" /><input type="button" onClick={() => store.dispatch(square)} value="乘方" /></div>,document.getElementById('root') )雖然可以顯示數字,但是點擊按鈕時,卻不能重新渲染頁面
【store.subscribe()】
接下來介紹store.subscribe()方法了,該方法用來設置監聽函數,一旦state發生變化,就自動執行這個函數。該方法的返回值是一個函數,調用這個函數可以解除監聽
下面將示例代碼更改如下
import store from './store' import React from 'react' import ReactDOM from 'react-dom' import { add, square } from './action/math'const render = () => ReactDOM.render(<div store={store}><p>{store.getState().math}</p><input type="button" onClick={() => store.dispatch(add(1))} value="+1" /><input type="button" onClick={() => store.dispatch(add(2))} value="+2" /><input type="button" onClick={() => store.dispatch(square)} value="乘方" /></div>,document.getElementById('root') )render() store.subscribe(render)代碼終于可以正常運行了?
異步
redux默認只處理同步,對于API請求這樣的異步任務則無能為力
接下來嘗試使用axios的get方法來請求下面這個API
https://jsonplaceholder.typicode.com/posts/2獲取的數據如下
{"userId": 1,"id": 2,"title": "qui est esse","body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }然后,將其id值設置為state.math的值
代碼修改如下
// constants/ActionTypes.js export const ADD = 'ADD' export const SQUARE = 'SQUARE' export const SET = 'SET'// action/math.js import { ADD, SQUARE, SET } from '../constants/ActionTypes' export const add = num => ({ type: ADD, num }) export const square = { type: SQUARE } export const setNum = num => ({type: SET,num})// reduce/math.js import { ADD, SQUARE,SET } from '../constants/ActionTypes' const math = (state = 10, action) => {switch (action.type) {case ADD:return state + action.numcase SQUARE:return state * statecase SET:return action.numdefault:return state} } export default math// index.js import store from './store' import React from 'react' import ReactDOM from 'react-dom' import { add, square, setNum } from './action/math' import axios from 'axios' let uri = 'https://jsonplaceholder.typicode.com/posts/2' const render = () => ReactDOM.render(<div store={store}><p>{store.getState().math}</p><input type="button" onClick={() => {axios.get(uri).then(res => {store.dispatch(store.dispatch(setNum(res.data.id)))})}} value="設置Num" /><input type="button" onClick={() => store.dispatch(add(1))} value="+1" /><input type="button" onClick={() => store.dispatch(add(2))} value="+2" /><input type="button" onClick={() => store.dispatch(square)} value="乘方" /></div>,document.getElementById('root') ) render() store.subscribe(render)但是,雖然API是異步操作,但store.dispatch并不是異步,而axios通過get方法請求回來數據后,store.dispatch在axios中的then方法中同步取得數據
【redux-thunk】
如果要使用真正的異步操作,即把axios方法封裝到store.dispatch中,需要使用redux-thunk中間件
首先,使用npm進行安裝
npm install --save redux-thunk然后,使用applyMiddleware來使用thunk中間件
import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' import rootReducer from '../reducer' export default createStore(rootReducer,applyMiddleware(thunk))接著來定義setNum這個action creator,然后在index.js文件的DOM加載完成后就發出setNum
[注意]如果action是一個對象,則它就是一個action,如果action是一個函數,則它是一個action creator,即action制造器
修改的代碼如下
// action/math.js import { ADD, SQUARE, SET } from '../constants/ActionTypes' import axios from 'axios' const uri = 'https://jsonplaceholder.typicode.com/posts/2' export const add = num => ({ type: ADD, num }) export const square = { type: SQUARE } export const setNum = () => (dispatch, getState) => {return axios.get(uri).then(res => {dispatch({type: SET,num: res.data.id})}) }// index.js import store from './store' import React from 'react' import ReactDOM from 'react-dom' import { add, square, setNum } from './action/math' const render = () => ReactDOM.render(<div store={store}><p>{store.getState().math}</p><input type="button" onClick={() => store.dispatch(setNum())} value="設置Num" /><input type="button" onClick={() => store.dispatch(add(1))} value="+1" /><input type="button" onClick={() => store.dispatch(add(2))} value="+2" /><input type="button" onClick={() => store.dispatch(square)} value="乘方" /></div>,document.getElementById('root') ) render() store.subscribe(render)【提示信息】
如果做的更完備一點,應該把異步請求時的提示信息也加上。增加一個fetch的action,用于控制fetch過程的提示信息及顯示隱藏情況
代碼更改如下
action/fetch.js // action/fetch.js import { SET_FETCH_MESSAGE, HIDE_FETCH_MESSAGE } from '../constants/ActionTypes' export const startFetch = { type: SET_FETCH_MESSAGE,message: '開始發送異步請求' } export const successFetch = { type: SET_FETCH_MESSAGE, message: '成功接收數據' } export const failFetch = { type: SET_FETCH_MESSAGE, message: '接收數據失敗' } export const hideFetchMessage = { type: HIDE_FETCH_MESSAGE } action/math.js // action/math.js import { ADD, SQUARE, SET } from '../constants/ActionTypes' import { startFetch, successFetch, failFetch, hideFetchMessage } from './fetch' import axios from 'axios' const uri = 'https://jsonplaceholder.typicode.com/posts/2' export const add = num => ({ type: ADD, num }) export const square = { type: SQUARE } export const setNum = () => (dispatch, getState) => {dispatch(startFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 500)return axios.get(uri).then(res => {setTimeout(() => {dispatch(successFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 500)dispatch({ type: SET, num: res.data.id })}, 1000)}).catch(err => {dispatch(failFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 500)}) } constants/ActionTypes.js // constants/ActionTypes.js export const ADD = 'ADD' export const SQUARE = 'SQUARE' export const SET = 'SET' export const SET_FETCH_MESSAGE = 'SET_FETCH_MESSAGE' export const HIDE_FETCH_MESSAGE = 'HIDE_FETCH_MESSAGE' reduce/fetch.js // reduce/fetch.js import { SET_FETCH_MESSAGE,HIDE_FETCH_MESSAGE } from '../constants/ActionTypes' const initState = {message:'',isShow:false } const fetch = (state = initState, action) => {switch (action.type) {case SET_FETCH_MESSAGE:return {isShow: true, message: action.message}case HIDE_FETCH_MESSAGE:return { isShow: false, message: '' }default:return state} } export default fetch index.js // index.js import store from './store' import React from 'react' import ReactDOM from 'react-dom' import { add, square, setNum } from './action/math' const render = () => ReactDOM.render(<div store={store}><p>{store.getState().math}</p><input type="button" onClick={() => store.dispatch(setNum())} value="設置Num" /><input type="button" onClick={() => store.dispatch(add(1))} value="+1" /><input type="button" onClick={() => store.dispatch(add(2))} value="+2" /><input type="button" onClick={() => store.dispatch(square)} value="乘方" />{store.getState().fetch.isShow && <p>{store.getState().fetch.message}</p>}</div>,document.getElementById('root') ) render() store.subscribe(render)?
展示和容器
下面來介紹react-redux。前面的代碼中,我們是通過store.subscribe()方法監控state狀態的變化來更新UI層的。而使用react-redux,可以讓組件動態訂閱狀態樹。狀態樹一旦被修改,組件能自動刷新顯示最新數據
react-redux將所有組件分成兩大類:展示組件和容器組件。展示組件只負責UI呈現,所有數據由參數props提供;容器組件則負責管理數據和業務邏輯,帶有內部狀態,可使用redux的API。要使用react-redux,就要遵守它的組件拆分規范
【provider】
react-redux提供Provider組件,可以讓容器組件默認可以拿到state,而不用當容器組件層級很深時,一級級將state傳下去
將index.js文件更改如下
// index.js import React from 'react' import ReactDOM from 'react-dom' import store from './store' import MathContainer from './container/MathContainer' import { Provider } from 'react-redux' ReactDOM.render(<Provider store={store}><MathContainer /></Provider>,document.getElementById('root') )按照組件拆分規范,將原來index.js中相關代碼,分拆到container/MathContainer和component/Math這兩個組件中
【connect】
react-redux提供connect方法,用于從展示組件生成容器組件。connect的意思就是將這兩種組件連接起來
import { connect } from 'react-redux' const MathContainer = connect()(Math);Math是展示組件,MathContainer就是由React-redux通過connect方法自動生成的容器組件
為了定義業務邏輯,需要給出下面兩方面的信息
1、輸入邏輯:外部的數據(即state對象)如何轉換為展示組件的參數
2、輸出邏輯:用戶發出的動作如何變為Action對象,從展示組件傳出去
因此,connect方法的完整API如下
import {connect} from 'react-redux' const MathContainer= connect(mapStateToProps,mapDispatchToProps )(Math)上面代碼中,connect方法接受兩個參數:mapStateToProps和mapDispatchToProps。它們定義了展示組件的業務邏輯。前者負責輸入邏輯,即將state映射到UI組件的參數(props),后者負責輸出邏輯,即將用戶對展示組件的操作映射成Action
【mapStateToProps()】
mapStateToProps建立一個從外部的state對象到展示組件的props對象的映射關系。作為參數,mapStateToProps執行后應該返回一個對象,里面的每一個鍵值對就是一個映射。
const mapStateToProps = (state) => {return {num: getNum(state) } }mapStateToProps的第一個參數總是state對象,還可以使用第二個參數,代表容器組件的props對象。使用ownProps作為參數后,如果容器組件的參數發生變化,也會引發展示組件重新渲染
const mapStateToProps = (state,ownProps) => {return {num: getNum(state) } }mapStateToProps會訂閱Store,每當state更新的時候,就會自動執行,重新計算展示組件的參數,從而觸發展示組件的重新渲染。connect方法可以省略mapStateToProps參數,那樣,展示組件就不會訂閱Store,就是說Store的更新不會引起展示組件的更新
【mapDispatchToProps】
mapDispatchToProps是connect函數的第二個參數,用來建立展示組件的參數到store.dispatch方法的映射。也就是說,它定義了用戶的哪些操作應該當作action,傳給Store。它可以是一個函數,也可以是一個對象
如果mapDispatchToProps是一個函數,會得到dispatch和ownProps(容器組件的props對象)兩個參數
const mapDispatchToProps = (dispatch,ownProps) => {return {onSetNumClick: () => dispatch(setNum())} }mapDispatchToProps作為函數,應該返回一個對象,該對象的每個鍵值對都是一個映射,定義了展示組件的參數怎樣發出action
如果mapDispatchToProps是一個對象,它的每個鍵名也是對應展示組件的同名參數,鍵值應該是一個函數,會被當作action creator,返回的action會由redux自動發出
因此,上面的寫法簡寫如下所示
const mapDispatchToProps = {onsetNumClick: () => setNum() }?
最終結構
由于store目錄中,只能一個index.js文件,且不會有內容擴展,將其更改為根目錄下的store.js文件
將其他的目錄都變成復數形式,最終的目錄結構如下所示
詳細代碼如下所示,且可訪問github線上地址
【components】
// components/Math.js import React from 'react' const Math = ({num,isShow,fetchMessage,onSetNumClick,onAddOneClick,onAddTwoClick,onSqureClick }) => (<section><p>{num}</p><input type="button" onClick={onSetNumClick} value="設置Num" /><input type="button" onClick={onAddOneClick} value="+1" /><input type="button" onClick={onAddTwoClick} value="+2" /><input type="button" onClick={onSqureClick} value="乘方" />{isShow && <p>{fetchMessage}</p>}</section> )export default Math【containers】
// containers/MathContainer.js import { connect } from 'react-redux' import Math from '../components/Math' import { getNum } from '../selectors/math' import { getFetchMessage, getFetchIsShow } from '../selectors/fetch' import { setNum, add, square } from '../actions/math' const mapStateToProps = state => {return {num: getNum(state),fetchMessage: getFetchMessage(state),isShow: getFetchIsShow(state)} } const mapDispatchToProps = {onSetNumClick: () => setNum(),onAddOneClick: () => add(1),onAddTwoClick: () => add(2),onSqureClick: () => square } const MathContainer = connect(mapStateToProps, mapDispatchToProps)(Math) export default MathContainer【actions】
actions/fetch.js // actions/fetch.js import { SET_FETCH_MESSAGE, HIDE_FETCH_MESSAGE } from '../constants/ActionTypes' export const startFetch = { type: SET_FETCH_MESSAGE,message: '開始發送異步請求' } export const successFetch = { type: SET_FETCH_MESSAGE, message: '成功接收數據' } export const failFetch = { type: SET_FETCH_MESSAGE, message: '接收數據失敗' } export const hideFetchMessage = { type: HIDE_FETCH_MESSAGE } actions/math.js // actions/math.js import { ADD, SQUARE, SET } from '../constants/ActionTypes' import { startFetch, successFetch, failFetch, hideFetchMessage } from './fetch' import axios from 'axios' const uri = 'https://jsonplaceholder.typicode.com/posts/2' export const add = num => ({ type: ADD, num }) export const square = { type: SQUARE } export const setNum = () => (dispatch, getState) => {dispatch(startFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 300)return axios.get(uri).then(res => {dispatch(successFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 300)dispatch({ type: SET, num: res.data.id })}).catch(err => {dispatch(failFetch)setTimeout(() => {dispatch(hideFetchMessage)}, 300)}) }【constants】
// constants/ActionTypes.js export const ADD = 'ADD' export const SQUARE = 'SQUARE' export const SET = 'SET' export const SET_FETCH_MESSAGE = 'SET_FETCH_MESSAGE' export const HIDE_FETCH_MESSAGE = 'HIDE_FETCH_MESSAGE'【reducers】
reducers/fetch.js // reducers/fetch.js import { SET_FETCH_MESSAGE,HIDE_FETCH_MESSAGE } from '../constants/ActionTypes' const initState = {message:'',isShow:false } const fetch = (state = initState, action) => {switch (action.type) {case SET_FETCH_MESSAGE:return {isShow: true, message: action.message}case HIDE_FETCH_MESSAGE:return { isShow: false, message: '' }default:return state} } export default fetch reducers/index.js // reducers/index.js import { combineReducers } from 'redux' import math from './math' import fetch from './fetch' const rootReducer = combineReducers({math,fetch })export default rootReducer reduces/math.js // reduces/math.js import { ADD, SQUARE,SET } from '../constants/ActionTypes' const math = (state = 10, action) => {switch (action.type) {case ADD:return state + action.numcase SQUARE:return state * statecase SET:return action.numdefault:return state} } export default math【selectors】
// selectors/fetch.js export const getFetchMessage = state => state.fetch.message export const getFetchIsShow = state => state.fetch.isShow // selectors/math.js export const getNum = state => state.math【根目錄】
index.js // index.js import React from 'react' import ReactDOM from 'react-dom' import store from './store' import MathContainer from './containers/MathContainer' import { Provider } from 'react-redux' ReactDOM.render(<Provider store={store}><MathContainer /></Provider>,document.getElementById('root') ) store.js // store.js import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' import rootReducer from './reducers' export default createStore(rootReducer,applyMiddleware(thunk))轉自:http://www.cnblogs.com/xiaohuochai/p/8447826.html
.
轉載于:https://www.cnblogs.com/crazycode2/p/8652972.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的redux 简明学习的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python | Xpath实战训练
- 下一篇: GlusterFS-Kubernetes