詳解react-redux插件入門(mén)
可先查看我的redux簡(jiǎn)單入門(mén)
react-redux簡(jiǎn)介
react-redux是使用redux開(kāi)發(fā)react時(shí)使用的一個(gè)插件，另外插一句，redux不是react的產(chǎn)品，vue和angular中也可以使用redux；下面簡(jiǎn)單講解，如何使用react-redux來(lái)開(kāi)發(fā)react。
描述
這個(gè)插件可以讓我們的redux代碼更加的簡(jiǎn)潔和美觀。我假設(shè)你已經(jīng)有一個(gè)使用create-react-app創(chuàng)建的一個(gè)可以顯示hello world的react環(huán)境，并且已經(jīng)安裝來(lái)redux。
注意：如果是剛使用create-react-app創(chuàng)建的，需要運(yùn)行 npm run eject彈出個(gè)性化設(shè)置，這樣就可以自定義配置了。
安裝
npm i react-redux --save
使用
react-redux提供了兩個(gè)重要的接口：Provider、connect,使用了這個(gè)插件，react-redux的subscribe和dispatch就可以忘記來(lái)，它們就用不著了。
代碼結(jié)構(gòu)
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
Provider中應(yīng)用的最外層，把store傳給它，只使用這一次。
//app.js
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
render() {
return (
<div className="App">
<h1>現(xiàn)在有美女{this.props.num}個(gè)。</h1>
<button onClick={this.props.addCreator}>add</button>
<button onClick={this.props.removeCreator}>remove</button>
<button onClick={this.props.addAsync}>addAsync</button>
</div >
);
}
}
//定義把state中哪個(gè)屬性放到props中
function mapStateToProps(state) {
return { num: state }
}
//定義把哪些方法放到props中
const actionCreators={ addCreator, removeCreator, addAsync };
//connect其實(shí)就是一個(gè)高階組件，把a(bǔ)pp傳進(jìn)去，返回一個(gè)新的app組件
App = connect(mapStateToProps, actionCreators)(App);
export default App;
connect負(fù)責(zé)從外部獲取組件需要的參數(shù)。通過(guò)connect定義后，放到props中的屬性和方法就可以直接通過(guò)this.props來(lái)獲取。
下面是reducer的定義。
//react.redux.js
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
switch (action.type) {
case Add:
return state + 1;
case Remove:
return state - 1;
default:
return 10;
}
}
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
使用裝飾器的方式更優(yōu)雅的寫(xiě)Conect
首先需要安裝babel-plugin-transform-decorators-legacy,并在package.json中配置。
安裝
npm i babel-plugin-transform-decorators-legacy --save-dev 這個(gè)只是開(kāi)發(fā)使用，所以安裝到--save-dev
配置
配置babel的plugins屬性
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy"]
]
}
修改原來(lái)寫(xiě)法
使用@connect來(lái)重新定義，寫(xiě)到class的上頭即可。
//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
// return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);
VS Code 裝飾器提示“experimentalDecorators”的解決辦法
點(diǎn)擊Visual Studio Code左下角的配置按鈕(或者文件>首選項(xiàng)>配置，Windows環(huán)境)，打開(kāi)用戶設(shè)置窗口，在搜索框內(nèi)輸入“experimentalDecorators”，發(fā)現(xiàn)竟然能夠找到選項(xiàng)，如下：
"javascript.implicitProjectConfig.experimentalDecorators": false
改成true就可以了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決React?hook?'useState'?cannot?be?called?in?
這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報(bào)錯(cuò)解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react歷次版本迭代主要想解決的是兩類(lèi)導(dǎo)致網(wǎng)頁(yè)卡頓的問(wèn)題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問(wèn)題，react18新增特性就是為了解決上述問(wèn)題2022-09-09
這篇文章主要介紹了使用Redux處理異步問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react+axios實(shí)現(xiàn)github搜索用戶功能(示例代碼)
這篇文章主要介紹了react+axios實(shí)現(xiàn)搜索github用戶功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
使用react-virtualized實(shí)現(xiàn)圖片動(dòng)態(tài)高度長(zhǎng)列表的問(wèn)題
一般我們?cè)趯?xiě)react項(xiàng)目中,同時(shí)渲染很多dom節(jié)點(diǎn),會(huì)造成頁(yè)面卡頓, 空白的情況。為了解決這個(gè)問(wèn)題，今天小編給大家分享一篇教程關(guān)于react-virtualized實(shí)現(xiàn)圖片動(dòng)態(tài)高度長(zhǎng)列表的問(wèn)題，感興趣的朋友跟隨小編一起看看吧2021-05-05
React組件用來(lái)實(shí)現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/image等等)，這篇文章主要介紹了React組件的用法和理解,需要的朋友可以參考下2023-02-02
在react項(xiàng)目中使用antd的form組件,動(dòng)態(tài)設(shè)置input框的值
這篇文章主要介紹了在react項(xiàng)目中使用antd的form組件,動(dòng)態(tài)設(shè)置input框的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
React如何利用相對(duì)于根目錄進(jìn)行引用組件詳解
這篇文章主要給大家介紹了關(guān)于React如何使用相對(duì)于根目錄進(jìn)行引用組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React-Hook中使用useEffect清除定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時(shí)器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，需要的朋友可以參考下2022-11-11