在 React 中使用 Redux 解決的問題小結(jié)
更新時(shí)間：2022年10月23日 09:43:28 作者：皮蛋很白
在 React 中組件通信的數(shù)據(jù)流是單向的，頂層組件可以通過(guò) props 屬性向下層組件傳遞數(shù)據(jù)，而下層組件不能直接向上層組件傳遞數(shù)據(jù)，這篇文章主要介紹了使用react+redux實(shí)現(xiàn)彈出框案例,需要的朋友可以參考下
在 React 中使用 Redux 解決的問題
在 React 項(xiàng)目中未加入 Redux 時(shí)的問題
在 React 中組件通信的數(shù)據(jù)流是單向的，頂層組件可以通過(guò) props 屬性向下層組件傳遞數(shù)據(jù)，而下層組件不能直接向上層組件傳遞數(shù)據(jù)。要實(shí)現(xiàn)下層組件修改上層組件的數(shù)據(jù)，需要上層組件傳遞修改數(shù)據(jù)的方法到下層組件。當(dāng)項(xiàng)目越來(lái)越大的時(shí)候，組件之間傳遞數(shù)據(jù)以及傳遞修改數(shù)據(jù)的方法變得越來(lái)越困難。
在 React 項(xiàng)目中加入 Redux 的好處
使用 Redux 管理數(shù)據(jù)，由于 Store 獨(dú)立于組件，使得數(shù)據(jù)管理獨(dú)立于組件，解決了組件與組件之間傳遞數(shù)據(jù)困難的問題。
React + Redux 安裝 Redux
在 react 項(xiàng)目中使用 redux 要下載兩個(gè)模塊
npm install redux react-redux
React 中 Redux 的工作流程
在 React 中 Redux 的工作流程有些變化：
- 組件通過(guò) dispatch 方法觸發(fā) Action
- Store 接收 Action 并將 Action 分發(fā)給 Reducer
- Reducer 根據(jù) Action 類型對(duì)狀態(tài)進(jìn)行更改并將更改后的狀態(tài)返回給 Store
- 組件訂閱了 Store 中的狀態(tài)，Store 中的狀態(tài)更新會(huì)同步到組件
React 計(jì)數(shù)器案例
React 實(shí)現(xiàn)
創(chuàng)建項(xiàng)目安裝模塊
# 創(chuàng)建項(xiàng)目(React 17 版本) npx create-react-app myapp # 安裝 redux cd myapp npm install redux
刪掉無(wú)用的文件
├─ src │ ├─ App.css │ ├─ App.test.js │ ├─ index.css │ ├─ logo.svg │ ├─ reportWebVitals.js │ └─ setupTests.js
初步實(shí)現(xiàn)
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
const initialState = {
count: 0
}
function reducer (state = initialState, action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1
}
case 'decrement':
return {
count: state.count - 1
}
default:
return state
}
}
const store = createStore(reducer)
const increment = { type: 'increment' }
const decrement = { type: 'decrement' }
function Counter() {
return <div>
<button onClick={() => store.dispatch(increment)}>+</button>
<span>{store.getState().count}</span>
<button onClick={() => store.dispatch(decrement)}>-</button>
</div>
}
store.subscribe(() => {
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
document.getElementById('root')
);
})
console.log(store.getState())
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
document.getElementById('root')
);
使用 Redux
開發(fā)時(shí)我們會(huì)把組件寫在單獨(dú)的文件中，如果將 Counter 組件單獨(dú)提取，就無(wú)法訪問 store 對(duì)象以及一些其它的問題，所以需要使用 redux。
安裝 react-redux
npm install react-redux
react-redux 用于讓 react 和 redux 完美結(jié)合，它僅僅提供兩個(gè)內(nèi)容：
- Provider 組件
- 它可以將創(chuàng)建出來(lái)的 store 放到全局，允許所有組件訪問
- 可以解決將組件存儲(chǔ)在單獨(dú)文件中時(shí)，訪問 store
- connect 方法
- connect 方法會(huì)幫助訂閱 store，當(dāng) store 中的狀態(tài)發(fā)生變化，會(huì)重新渲染組件
- 解決了需要手動(dòng)訂閱更新組件狀態(tài)
- connect 方法可以獲取 store 中的狀態(tài)，映射到組件的 props 屬性中
- connect 方法可以獲取 dispatch 方法，組件可以通過(guò) props.dispatch訪問
Provide 組件
- Provider 組件要包裹項(xiàng)目中所有的組件，也就是應(yīng)該被放在最外層組件上
- Provider 通過(guò) store 屬性接收創(chuàng)建的 store 對(duì)象
connect 方法
- 首先調(diào)用 connect 方法
- 第一個(gè)參數(shù)是一個(gè)函數(shù)
- 函數(shù)接收的第一個(gè)參數(shù)，即組件中的狀態(tài) state
- 函數(shù)要返回一個(gè)對(duì)象，該對(duì)象定義的屬性都會(huì)映射到組件的 props 屬性中
- 第二個(gè)參數(shù)也是一個(gè)函數(shù)
- 函數(shù)接收的第一個(gè)參數(shù)，即 dispatch 方法
- 函數(shù)要返回一個(gè)對(duì)象，可以定義觸發(fā) Action 的方法，它們同樣會(huì)被映射到組件的 props 屬性中
- 返回一個(gè)方法
- 第一個(gè)參數(shù)是一個(gè)函數(shù)
- 繼續(xù)調(diào)用返回的方法，并傳遞當(dāng)前的組件
修改代碼
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import Counter from './components/Counter'
import { Provider } from 'react-redux'
const initialState = {
count: 0
}
function reducer (state = initialState, action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1
}
case 'decrement':
return {
count: state.count - 1
}
default:
return state
}
}
const store = createStore(reducer)
ReactDOM.render(
// 通過(guò) provider 組件將 store 放在了全局，供所有組件可以訪問
<React.StrictMode>
<Provider store={store}>
<Counter />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
提取的 Counter 組件
// src/components/Counter.js
import { connect } from 'react-redux'
function Counter(props) {
return <div>
<button onClick={() => props.dispatch({ type: 'increment' })}>+</button>
<span>{props.count}</span>
<button onClick={() => props.dispatch({ type: 'decrement' })}>-</button>
</div>
}
const mapStateToProps = state => ({
count: state.count
})
export default connect(mapStateToProps)(Counter)
使用 connect 第二個(gè)參數(shù)簡(jiǎn)化組件
// src/components/Counter.js
import { connect } from 'react-redux'
function Counter({count, increment, decrement}) {
return <div>
<button onClick={increment}>+</button>
<span>{count}</span>
<button onClick={decrement}>-</button>
</div>
}
const mapStateToProps = state => ({
count: state.count
})
const mapDispatchToProps = dispatch => ({
increment () {
dispatch({ type: 'increment' })
},
decrement () {
dispatch({ type: 'decrement' })
}
})
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
使用 bindActionCreators 方法繼續(xù)簡(jiǎn)化
觸發(fā) Action 的方法 increment 和 decrement 的內(nèi)容基本是一樣的，redux 提供 bindActionCreators 方法生成一個(gè)函數(shù)，來(lái)簡(jiǎn)化這種重復(fù)性代碼。
- 參數(shù)
- actionCreators: 對(duì)象或返回對(duì)象的函數(shù)
- key是生成函數(shù)的名稱
- value是一個(gè)返回 Action 的函數(shù)
- dispatch: 需傳遞Store 的 dispatch 方法
- actionCreators: 對(duì)象或返回對(duì)象的函數(shù)
- 返回一個(gè)對(duì)象，同 connect 接收的第二個(gè)參數(shù)
// src/components/Counter.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
function Counter({count, increment, decrement}) {
return <div>
<button onClick={increment}>+</button>
<span>{count}</span>
<button onClick={decrement}>-</button>
</div>
}
const mapStateToProps = state => ({
count: state.count
})
const mapDispatchToProps = dispatch => ({
...bindActionCreators({
increment() {
return { type: 'increment' }
},
decrement() {
return { type: 'decrement' }
}
}, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
此時(shí)還沒有達(dá)到簡(jiǎn)化的效果，可以將 actionCreators 提取到單獨(dú)的文件中。
// src\store\actions\counter.action.js
export const increment = () => ({ type: 'increment' })
export const decrement = () => ({ type: 'decrement' })// src/components/Counter.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as counterActions from '../store/actions/counter.action'
function Counter({count, increment, decrement}) {
return <div>
<button onClick={increment}>+</button>
<span>{count}</span>
<button onClick={decrement}>-</button>
</div>
}
const mapStateToProps = state => ({
count: state.count
})
const mapDispatchToProps = dispatch => bindActionCreators(counterActions, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
代碼重構(gòu)
為了繼續(xù)演示 Redux 的相關(guān)內(nèi)容，將與 Redux 相關(guān)的代碼從 src/index.js中抽離出去，讓項(xiàng)目結(jié)構(gòu)更加合理。
- 將 reducer 函數(shù)抽離到一個(gè)文件中
- 將創(chuàng)建 store 的代碼手里到一個(gè)文件中
- 將 Actions 的 type 抽象成模塊中的成員，好處是：
編輯器有提示，避免寫錯(cuò)
編輯器自動(dòng)插入模塊引入的代碼
將 Actions 的 type 抽象成模塊中的成員
// src\store\actions\counter.action.js
import { DECREMENT, INCREMENT } from "../const/counter.const"
export const increment = () => ({ type: INCREMENT })
export const decrement = () => ({ type: DECREMENT })將 reducer 函數(shù)抽離到一個(gè)文件中
// src\store\reducers\counter.reducer.js
import { DECREMENT, INCREMENT } from "../const/counter.const"
const initialState = {
count: 0
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
count: state.count + 1
}
case DECREMENT:
return {
count: state.count - 1
}
default:
return state
}
}
export default reducer
將創(chuàng)建 store 的代碼手里到一個(gè)文件中
// src\store\index.js
import { createStore } from 'redux'
import reducer from './reducers/counter.reducer'
export const store = createStore(reducer)修改后的 src/index.js
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Counter from './components/Counter'
import { Provider } from 'react-redux'
import { store } from './store'
ReactDOM.render(
// 通過(guò) provider 組件將 store 放在了全局，供所有組件可以訪問
<React.StrictMode>
<Provider store={store}>
<Counter />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)為 Action 傳遞參數(shù)
當(dāng)前計(jì)數(shù)器對(duì)數(shù)字進(jìn)行遞增/減的數(shù)值為 1，現(xiàn)在通過(guò)給 Action 傳遞參數(shù)，允許自定義數(shù)值。
- 傳遞參數(shù)：調(diào)用觸發(fā) Action 函數(shù)的時(shí)候傳遞參數(shù)
- 接收參數(shù)：返回 Action 的函數(shù)接收參數(shù)，添加到返回的 Action 對(duì)象中
- 處理參數(shù)：reducer 函數(shù)處理的時(shí)候，可以從 action 對(duì)象獲取這個(gè)參數(shù)，進(jìn)行處理
傳遞參數(shù)：
// src/components/Counter.js
function Counter({ count, increment, decrement }) {
// 修改 Counter 組件中調(diào)用 increment decrement 函數(shù)的地方
return (
<div>
<button onClick={() => increment(5)}>+</button>
<span>{count}</span>
<button onClick={() => decrement(5)}>-</button>
</div>
)
}
接收參數(shù)：
// src\store\actions\counter.action.js
import { DECREMENT, INCREMENT } from "../const/counter.const"
export const increment = payload => ({ type: INCREMENT, payload })
export const decrement = payload => ({ type: DECREMENT, payload })處理參數(shù)：
// src\store\reducers\counter.reducer.js
import { DECREMENT, INCREMENT } from "../const/counter.const"
const initialState = {
count: 0
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
count: state.count + action.payload
}
case DECREMENT:
return {
count: state.count - action.payload
}
default:
return state
}
}
export default reducer
Redux 彈出框
在頁(yè)面中顯示兩個(gè)按鈕：
- 顯示：顯示彈出框
- 隱藏：隱藏彈出框
初始化靜態(tài)內(nèi)容
Modal 組件
// src\components\Modal.js
function Modal() {
const styles = {
width: 200,
height: 200,
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -100,
marginTop: -100,
backgroundColor: 'skyblue'
}
return (
<div>
<button>顯示</button>
<button>隱藏</button>
<div style={styles}></div>
</div>
)
}
export default Modal修改 src/index.js
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import { store } from './store'
ReactDOM.render(
// 通過(guò) provider 組件將 store 放在了全局，供所有組件可以訪問
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)修改 src/App.js
// src\App.js
import Counter from './components/Counter'
import Modal from './components/Modal'
function App() {
return (
<div>
<Counter />
<Modal />
</div>
)
}
export default App添加默認(rèn)隱藏狀態(tài)
在 reducer 中添加顯示狀態(tài)的屬性
// src\store\reducers\counter.reducer.js
import { DECREMENT, INCREMENT } from "../const/counter.const"
const initialState = {
count: 0,
showStatus: false
}
function reducer(state = initialState, action) {...}
export default reducer在組件中使用狀態(tài)
// src\components\Modal.js
import { connect } from 'react-redux'
function Modal({ showStatus }) {
const styles = {
width: 200,
height: 200,
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -100,
marginTop: -100,
backgroundColor: 'skyblue',
display: showStatus ? 'block' : 'none'
}
return (
<div>
<button>顯示</button>
<button>隱藏</button>
<div style={styles}></div>
</div>
)
}
const mapStateToProps = state => ({
showStatus: state.showStatus
})
export default connect(mapStateToProps)(Modal)定義操作按鈕
定義 Action 的 type
// src\store\const\modal.const.js export const SHOWMODAL = 'showModal' export const HIDEMODAL = 'hideModal'
定義生成 Action 的函數(shù)
// src\store\actions\modal.actions.js
import { HIDEMODAL, SHOWMODAL } from "../const/modal.const"
export const show = () => ({ type: SHOWMODAL })
export const hide = () => ({ type: HIDEMODAL })創(chuàng)建觸發(fā) Action 的方法并使用
// src\components\Modal.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as modalActions from '../store/actions/modal.actions'
function Modal({ showStatus, show, hide }) {
const styles = {
width: 200,
height: 200,
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -100,
marginTop: -100,
backgroundColor: 'skyblue',
display: showStatus ? 'block' : 'none'
}
return (
<div>
<button onClick={show}>顯示</button>
<button onClick={hide}>隱藏</button>
<div style={styles}></div>
</div>
)
}
const mapStateToProps = state => ({
showStatus: state.showStatus
})
const mapDispatchToProps = dispatch => bindActionCreators(modalActions, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Modal)
修改 reducer 函數(shù)，處理變更：
// src\store\reducers\counter.reducer.js
import { DECREMENT, INCREMENT } from '../const/counter.const'
import { HIDEMODAL, SHOWMODAL } from '../const/modal.const'
const initialState = {
count: 0,
showStatus: false
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
// reducer 返回的對(duì)象會(huì)替換 store 中的狀態(tài)對(duì)象，所以要將其它狀態(tài)也包含進(jìn)去
return {
...state,
count: state.count + action.payload
}
case DECREMENT:
return {
...state,
count: state.count - action.payload
}
case SHOWMODAL:
return {
...state,
showStatus: true
}
case HIDEMODAL:
return {
...state,
showStatus: false
}
default:
return state
}
}
export default reducer
注意：reducer 返回的對(duì)象會(huì)替換 store 中的狀態(tài)對(duì)象，所以要將其它狀態(tài)也包含進(jìn)去
衍生的問題
在 reducer 函數(shù)中匹配了所有狀態(tài)的變更，當(dāng)項(xiàng)目越來(lái)越大，狀態(tài)越來(lái)越多時(shí)，管理起來(lái)就很麻煩。
所以要將 rreducer 函數(shù)進(jìn)行拆分。
拆分合并 reducer 拆分
將 modal 拆分出去
// src\store\reducers\modal.reducer.js
import { HIDEMODAL, SHOWMODAL } from '../const/modal.const'
const initialState = {
show: false
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case SHOWMODAL:
return {
...state,
showStatus: true
}
case HIDEMODAL:
return {
...state,
showStatus: false
}
default:
return state
}
}
export default reducer// src\store\reducers\counter.reducer.js
import { DECREMENT, INCREMENT } from '../const/counter.const'
const initialState = {
count: 0,
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
// reducer 返回的對(duì)象會(huì)替換 store 中的狀態(tài)對(duì)象，所以要將其它狀態(tài)也包含進(jìn)去
return {
...state,
count: state.count + action.payload
}
case DECREMENT:
return {
...state,
count: state.count - action.payload
}
default:
return state
}
}
export default reducer合并
合并 reducer 需要借助 redux 提供的 combineReducers 方法。
combineReducers 把一個(gè)由多個(gè)不同 reducer 函數(shù)作為 value 的 object 對(duì)象，合并成一個(gè)最終的 reducer 函數(shù)，然后就可以對(duì)這個(gè) reducer 調(diào)用 createStore 方法。
合并后的 reducer 可以調(diào)用各個(gè)子 reducer，并把它們返回的結(jié)果合并成一個(gè) state 對(duì)象。
由 combineReducers() 返回的 state 對(duì)象，會(huì)將傳入的每個(gè) reducer 返回的 state 按傳遞給 combineReducers() 時(shí)對(duì)應(yīng)的 key 進(jìn)行命名。
// src\store\reducers\root.reducer.js
import { combineReducers } from 'redux'
import CounterReducer from './counter.reducer'
import ModalReducer from './modal.reducer'
// 合并后的 store 為 { counter: { count: 0 }, modal: { showStatus: false } }
export default combineReducers({
counter: CounterReducer,
modal: ModalReducer
})// src\store\index.js
import { createStore } from 'redux'
import RootReducer from './reducers/root.reducer'
export const store = createStore(RootReducer)調(diào)整組件
因?yàn)?store 中的數(shù)據(jù)結(jié)構(gòu)發(fā)生變化，所以還需要調(diào)整下組件中獲取狀態(tài)的地方
// src\store\index.js
import { createStore } from 'redux'
import RootReducer from './reducers/root.reducer'
export const store = createStore(RootReducer)// src\components\Modal.js
const mapStateToProps = state => ({
showStatus: state.modal.showStatus
})
到此這篇關(guān)于在 React 中使用 Redux 解決的問題的文章就介紹到這了,更多相關(guān)React Redux 案例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼
這篇文章主要介紹了react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例
這篇文章主要介紹了react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例2018-09-09
在開發(fā)過(guò)程中，總是遇到很多列表的顯示。當(dāng)上數(shù)量級(jí)別的列表渲染于瀏覽器，終會(huì)導(dǎo)致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來(lái)解決這個(gè)問題2021-05-05
React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
React根據(jù)當(dāng)前頁(yè)面路由進(jìn)行自動(dòng)高亮示例代碼
要根據(jù)當(dāng)前頁(yè)面路由自動(dòng)高亮頂部菜單項(xiàng),可以使用 React Router 的 useLocation 鉤子來(lái)獲取當(dāng)前路徑,并根據(jù)路徑動(dòng)態(tài)設(shè)置菜單項(xiàng)的高亮效果,本文給大家介紹了一個(gè)完整的示例,展示如何根據(jù)當(dāng)前頁(yè)面路由自動(dòng)高亮頂部菜單項(xiàng),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
本文主要介紹了React 實(shí)現(xiàn)井字棋,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
react中的useImperativeHandle()和forwardRef()用法
這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了淺談React碰到v-if,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11