react redux入門示例
環(huán)境準(zhǔn)備
為了方便，這里使用create-react-app搭建react環(huán)境
create-react-app mydemo
彈出配置
如果需要自定義react的配置，需要運(yùn)行下面的命令把配置文件彈出來。
npm run eject
安裝redux
npm i redux --save
簡單理解
redux簡單用法就是通過它的store來訂閱和發(fā)布信息。
通過subscribe來訂閱action，通過dispatch來觸發(fā)action。reducer中定義來各個(gè)action要做的事情。
demo代碼
reducer定義
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;
}
}
//action creator,把a(bǔ)ction封裝成一個(gè)方法，這樣用的時(shí)候不用每次定義，避免出錯(cuò)
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
ReactDOM.render(
<App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
document.getElementById('root')
);
}
//封裝成方法，方便下面的store的訂閱調(diào)用
render();
//每當(dāng)dispatch時(shí)，訂閱的函數(shù)就會(huì)執(zhí)行
store.subscribe(render);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var store=this.props.store;
var num=store.getState();
return (
<div className="App">
<h1>現(xiàn)在有機(jī)關(guān)槍{this.props.num}把。</h1>
<button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
<button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
</div >
);
}
}
export default App;
通過store的dispatch來觸發(fā)action，index.js中訂閱的事件就會(huì)執(zhí)行。
redux的異步執(zhí)行
redux中如果需要執(zhí)行異步操作，需要安裝react-thunk插件
npm i react-thunk --save
同時(shí)需要redux插件的applyMiddleware
關(guān)鍵代碼
設(shè)置其實(shí)很簡單，創(chuàng)建store時(shí)，把thunk傳遞給它就行了。
import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));
在app.js中增加一個(gè)觸發(fā)異步操作的按鈕，reducer中已經(jīng)定義了一個(gè)異步的方法。
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
異步調(diào)用方法會(huì)返回一個(gè)有兩個(gè)參數(shù)的方法，兩個(gè)參數(shù)都是函數(shù)，第一個(gè)是dispatch函數(shù)，第二個(gè)是getState函數(shù)。
dispatch觸發(fā)action，getState獲取state的值。
在app.js中增加代碼
<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了react Suspense工作原理解析以及基本應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下2017-09-09
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Hook是React16.8的新增特性,它可以讓你在不編寫class的情況下使用state以及其他的React特性,本文中講解的useState就是React中的其中一個(gè)Hook,這篇文章主要給大家介紹了關(guān)于React中useState理解和使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目的詳細(xì)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
state 中可以保存任意類型的JavaScript值，包括對(duì)象，但是，不應(yīng)該直接修改存放在 React state 中的對(duì)象，這篇文章主要介紹了React?18更新state中的對(duì)象,需要的朋友可以參考下2023-08-08
React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
React中使用async validator進(jìn)行表單驗(yàn)證的實(shí)例代碼
react上進(jìn)行表單驗(yàn)證是很繁瑣的，在這里使用async-validator處理起來就變的很方便了，接下來通過本文給大家介紹React中使用async validator進(jìn)行表單驗(yàn)證的方法,需要的朋友可以參考下2018-08-08