詳解react-redux插件入門
可先查看我的redux簡單入門
react-redux簡介
react-redux是使用redux開發(fā)react時使用的一個插件，另外插一句，redux不是react的產品，vue和angular中也可以使用redux；下面簡單講解，如何使用react-redux來開發(fā)react。
描述
這個插件可以讓我們的redux代碼更加的簡潔和美觀。我假設你已經有一個使用create-react-app創(chuàng)建的一個可以顯示hello world的react環(huán)境，并且已經安裝來redux。
注意：如果是剛使用create-react-app創(chuàng)建的，需要運行 npm run eject彈出個性化設置，這樣就可以自定義配置了。
安裝
npm i react-redux --save
使用
react-redux提供了兩個重要的接口：Provider、connect,使用了這個插件，react-redux的subscribe和dispatch就可以忘記來，它們就用不著了。
代碼結構
//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中應用的最外層，把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>現在有美女{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其實就是一個高階組件，把app傳進去，返回一個新的app組件
App = connect(mapStateToProps, actionCreators)(App);
export default App;
connect負責從外部獲取組件需要的參數。通過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”的解決辦法
點擊Visual Studio Code左下角的配置按鈕(或者文件>首選項>配置，Windows環(huán)境)，打開用戶設置窗口，在搜索框內輸入“experimentalDecorators”，發(fā)現竟然能夠找到選項，如下：
"javascript.implicitProjectConfig.experimentalDecorators": false
改成true就可以了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
解決React?hook?'useState'?cannot?be?called?in?
這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報錯解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react歷次版本迭代主要想解決的是兩類導致網頁卡頓的問題，分別是cpu密集型任務和io密集型任務導致的卡頓問題，react18新增特性就是為了解決上述問題2022-09-09
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react+axios實現github搜索用戶功能(示例代碼)
這篇文章主要介紹了react+axios實現搜索github用戶功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
使用react-virtualized實現圖片動態(tài)高度長列表的問題
一般我們在寫react項目中,同時渲染很多dom節(jié)點,會造成頁面卡頓, 空白的情況。為了解決這個問題，今天小編給大家分享一篇教程關于react-virtualized實現圖片動態(tài)高度長列表的問題，感興趣的朋友跟隨小編一起看看吧2021-05-05
React組件用來實現局部功能效果的代碼和資源的集合(html/css/js/image等等)，這篇文章主要介紹了React組件的用法和理解,需要的朋友可以參考下2023-02-02
在react項目中使用antd的form組件,動態(tài)設置input框的值
這篇文章主要介紹了在react項目中使用antd的form組件,動態(tài)設置input框的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要給大家介紹了關于React如何使用相對于根目錄進行引用組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-10-10
解決React報錯React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報錯React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React-Hook中使用useEffect清除定時器的實現方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時器，需要的朋友可以參考下2022-11-11