如何在React中直接使用Redux
React中使用Redux
開始之前需要強(qiáng)調(diào)一下,redux和react沒有直接的關(guān)系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。
盡管這樣說,redux依然是和React庫結(jié)合的更好,因?yàn)樗麄兪峭ㄟ^state函數(shù)來描述界面的狀態(tài),Redux可以發(fā)射狀態(tài)的更新, 讓他們作出相應(yīng); 目前redux在react中使用是最多的,所以我們需要將之前編寫的redux代碼,融入到react當(dāng)中去。
這里我創(chuàng)建了兩個(gè)組件:
Home組件:其中會(huì)展示當(dāng)前的counter值,并且有一個(gè)+1和+5的按鈕;
Profile組件:其中會(huì)展示當(dāng)前的counter值,并且有一個(gè)-1和-5的按鈕;
首先將結(jié)構(gòu)搭建出來, 然后安裝redux庫: npm i redux
安裝完成后, 安裝我們上一篇文章講解的目錄結(jié)構(gòu), 創(chuàng)建Store文件夾
store/index.js 中創(chuàng)建store
import { createStore } from "redux"; import reducer from "./reducer"; const store = createStore(reducer) export default store
store/constants.js 中定義變量
export const CHANGE_NUM = "change_num"
store/reducer.js
import { CHANGE_NUM } from "./constants" const initialState = { counter: 10 } export default function reducer(state = initialState, action) { switch(action.type) { case CHANGE_NUM: return {...state, counter: state.counter + action.num} default: return state } }
store/actionCreators.js
import { CHANGE_NUM } from "./constants" export const changeNumAction = (num) => ({ type: CHANGE_NUM, num })
store中編寫完成后, 在Home和Profile頁面中使用store中的state, 核心代碼主要是兩個(gè):
在 componentDidMount 中監(jiān)聽store的變化,當(dāng)數(shù)據(jù)發(fā)生變化時(shí)重新設(shè)置 counter;
在發(fā)生點(diǎn)擊事件時(shí),調(diào)用store的dispatch來派發(fā)對(duì)應(yīng)的action;
Home組件
import React, { PureComponent } from 'react' import store from '../store' import { changeNumAction } from '../store/actionCreators' export class Home extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } // 核心一: 在componentDidMount中監(jiān)聽store的變化,當(dāng)數(shù)據(jù)發(fā)生變化時(shí)重新設(shè)置 counter; componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } // 核心二: 在發(fā)生點(diǎn)擊事件時(shí),調(diào)用store的dispatch來派發(fā)對(duì)應(yīng)的action; changeNum(num) { store.dispatch(changeNumAction(num)) } render() { const { counter } = this.state return ( <div> <h2>Home</h2> <h2>當(dāng)前計(jì)數(shù): {counter} </h2> <button onClick={() => this.changeNum(1)}>+1</button> <button onClick={() => this.changeNum(5)}>+5</button> </div> ) } } export default Home
Profile組件
import React, { PureComponent } from 'react' import store from '../store' import { changeNumAction } from '../store/actionCreators' export class Profile extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } changeNum(num) { store.dispatch(changeNumAction(num)) } render() { const { counter } = this.state return ( <div> <h2>Profile</h2> <h2>當(dāng)前計(jì)數(shù): {counter}</h2> <button onClick={() => this.changeNum(-1)}>-1</button> <button onClick={() => this.changeNum(-5)}>-5</button> </div> ) } } export default Profile
我們發(fā)現(xiàn)Home組件和Profile組件中的代碼是大同小異的, 所以這不是我們最終編寫的代碼, 后面還會(huì)對(duì)代碼進(jìn)行優(yōu)化。
到此這篇關(guān)于在React中直接使用Redux的文章就介紹到這了,更多相關(guān)React使用Redux內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法
這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào),幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下2021-04-04react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)
本文主要介紹了react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表
虛擬列表是現(xiàn)在比較常用的前端渲染大數(shù)據(jù)列表的方案,目前也有很多組件庫和工具庫也都有對(duì)應(yīng)的實(shí)現(xiàn),本文將給大家介紹一下如何用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2023-12-12react?表單數(shù)據(jù)形式配置化設(shè)計(jì)
這篇文章主要介紹了react表單數(shù)據(jù)形式配置化設(shè)計(jì),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07利用React-router+Webpack快速構(gòu)建react程序
目前 React、Webpack 等技術(shù)如火如荼,你是不是還在愁苦如何把這些雜亂的知識(shí)怎么學(xué)習(xí)一下,開啟一段新的前端開發(fā)之路呢?那么這篇將給大家運(yùn)用示例代碼詳細(xì)的介紹使用React-router和Webpack如何快速構(gòu)建一個(gè)react程序,感興趣的朋友們下面來一起看看吧。2016-10-10