詳解react-redux插件入門
可先查看我的redux簡單入門
react-redux簡介
react-redux是使用redux開發(fā)react時使用的一個插件，另外插一句，redux不是react的產(chǎn)品，vue和angular中也可以使用redux；下面簡單講解，如何使用react-redux來開發(fā)react。
描述
這個插件可以讓我們的redux代碼更加的簡潔和美觀。我假設(shè)你已經(jīng)有一個使用create-react-app創(chuàng)建的一個可以顯示hello world的react環(huán)境，并且已經(jīng)安裝來redux。
注意：如果是剛使用create-react-app創(chuàng)建的，需要運(yùn)行 npm run eject彈出個性化設(shè)置，這樣就可以自定義配置了。
安裝
npm i react-redux --save
使用
react-redux提供了兩個重要的接口：Provider、connect,使用了這個插件，react-redux的subscribe和dispatch就可以忘記來，它們就用不著了。
代碼結(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}個。</h1>
<button onClick={this.props.addCreator}>add</button>
<button onClick={this.props.removeCreator}>remove</button>
<button onClick={this.props.addAsync}>addAsync</button>
</div >
);
}
}
//定義把state中哪個屬性放到props中
function mapStateToProps(state) {
return { num: state }
}
//定義把哪些方法放到props中
const actionCreators={ addCreator, removeCreator, addAsync };
//connect其實(shí)就是一個高階組件，把a(bǔ)pp傳進(jìn)去，返回一個新的app組件
App = connect(mapStateToProps, actionCreators)(App);
export default App;
connect負(fù)責(zé)從外部獲取組件需要的參數(shù)。通過connect定義后，放到props中的屬性和方法就可以直接通過this.props來獲取。
下面是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)雅的寫Conect
首先需要安裝babel-plugin-transform-decorators-legacy,并在package.json中配置。
安裝
npm i babel-plugin-transform-decorators-legacy --save-dev 這個只是開發(fā)使用，所以安裝到--save-dev
配置
配置babel的plugins屬性
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy"]
]
}
修改原來寫法
使用@connect來重新定義，寫到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左下角的配置按鈕(或者文件>首選項>配置，Windows環(huán)境)，打開用戶設(shè)置窗口，在搜索框內(nèi)輸入“experimentalDecorators”，發(fā)現(xiàn)竟然能夠找到選項，如下：
"javascript.implicitProjectConfig.experimentalDecorators": false
改成true就可以了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react項目中使用插件配置路由的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
react如何同步獲取useState的最新狀態(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了React+Webpack快速上手指南(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了React翻頁器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
React?中使用?Redux?的?4?種寫法小結(jié)
這篇文章主要介紹了在?React?中使用?Redux?的?4?種寫法,Redux 一般來說并不是必須的，只有在項目比較復(fù)雜的時候，比如多個分散在不同地方的組件使用同一個狀態(tài)，本文就React使用?Redux的相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-06-06
本篇文章主要介紹了React高階組件入門介紹，這篇文章中我們詳細(xì)的介紹了什么是高階組件，如何使用高階組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React實(shí)現(xiàn)響應(yīng)式布局的最佳實(shí)踐
在當(dāng)今的前端開發(fā)中,響應(yīng)式設(shè)計已經(jīng)成為必不可少的部分,隨著各種設(shè)備的出現(xiàn),確保我們的網(wǎng)頁在不同屏幕尺寸上展示良好,已經(jīng)成為開發(fā)者的首要任務(wù)之一,本文將介紹如何在React中實(shí)現(xiàn)響應(yīng)式布局,提供一些最佳實(shí)踐和示例代碼,幫助大家更好地理解這一概念2025-02-02
今天帶來大家學(xué)習(xí)react-diagram 序列化Json解讀的相關(guān)知識，本文通過多種案例給大家分析序列化知識，通過圖文并茂的形式給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2021-05-05