0x000 概述
之前寫的所有關於redux的文章都是純粹的redux，是和框架無關、環境無關的redux，所以我沒有將redux和react一起講，爲的是吧redux和react分開，作爲獨立的個體來分析，redux提現的是一種思想，而不是一個思維定式。而現在我們可以嘗試在react中來使用了。
0x001 react集成redux栗子-counter
- 源碼
import {createStore} from 'redux'
import React from 'react'
import ReactDom from 'react-dom'
//reducer
const counter = (state = 0, action) => {
switch (action.type) {
case ACTION_INCREMENT:
return state + 1
case ACTION_DECREMENT:
return state - 1
default:
return state
}
}
// action
const ACTION_INCREMENT = 'INCREMENT'
const ACTION_DECREMENT = 'DECREMENT'
// action creator
const increment = () => ({
type: ACTION_INCREMENT
})
const decrement = () => ({
type: ACTION_DECREMENT
})
// store
const store = createStore(counter)
// 組件
class App extends React.Component {
constructor() {
super()
// 初始化 state
this.state = {
counter: 0
}
// 監聽 store 變化, store 變化的時候更新 counter
store.subscribe(() => {
this.setState({
counter: store.getState()
})
})
}
// 組件銷燬的時候取消訂閱
componentWillUnmount(){
this.unSub()
}
render() {
return <div>
<p>{this.state.counter}</p>
<button
onClick={() => {
store.dispatch(increment())
}}>+
</button>
<button
onClick={() => {
store.dispatch(decrement())
}}>-
</button>
</div>
}
}
ReactDom.render(
<App/>,
document.getElementById('app')
)
- 效果
0x002 原生集成 redux
-
src/index.html<!doctype html> <html> <head> <title>React Study</title> </head> <body> <div id="app"> <p id="counter">0</p> <button id="incrementBtn">+</button> <button id="decrementBtn">-</button> </div> </body> </html> -
src/index.jsimport {createStore} from 'redux' //reducer const counter = (state = 0, action) => { switch (action.type) { case ACTION_INCREMENT: return state + 1 case ACTION_DECREMENT: return state - 1 default: return state } } // action const ACTION_INCREMENT = 'INCREMENT' const ACTION_DECREMENT = 'DECREMENT' // action creator const increment = () => ({ type: ACTION_INCREMENT }) const decrement = () => ({ type: ACTION_DECREMENT }) // store const store = createStore(counter) // 初始化一些 dom 變量 let counterP = document.getElementById('counter') let incrementBtn = document.getElementById('incrementBtn') let decrementBtn = document.getElementById('decrementBtn') // 監聽變化, 在 store 變化的時候修改計數器顯示 store.subscribe(() => { counterP.innerText = store.getState() }) // 添加點擊事件, 當+被點擊的時候修改 state incrementBtn.onclick = () => { store.dispatch(increment()) } // 添加點擊事件, 當-被點擊的時候修改 state decrementBtn.onclick = () => { store.dispatch(decrement()) } - 效果和上圖一致
0x003 vue集成redux
-
源碼：
<template> <div id="app"> <p>{{counter}}</p> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> </div> </template> <script> import {createStore} from 'redux' //reducer const counter = (state = 0, action) => { switch (action.type) { case ACTION_INCREMENT: return state + 1 case ACTION_DECREMENT: return state - 1 default: return state } } // action const ACTION_INCREMENT = 'INCREMENT' const ACTION_DECREMENT = 'DECREMENT' // action creator const increment = () => ({ type: ACTION_INCREMENT }) const decrement = () => ({ type: ACTION_DECREMENT }) // store const store = createStore(counter) export default { name: 'app', data: function () { return { counter: 0 } }, created: function () { // 組件創建的時候監聽 store 變化, 更新到 data this.unSub=store.subscribe(() => { this.counter = store.getState() }) }, beforeDestroy:function(){ // 組件銷燬的時候取消訂閱 this.unSub() }, methods: { increment: function () { store.dispatch(increment()) }, decrement: function () { store.dispatch(decrement()) } } } </script> <style> </style> - 效果和上圖一致
0x004 總結
redux是獨立的，就和react、vue一樣都是獨立的框架，如何組合他們是我們的選擇，而不是必然和唯一的，要讓框架成爲我們的生產力工具，而不是束縛我們的存在。