react redux入門示例
環(huán)境準備
為了方便，這里使用create-react-app搭建react環(huán)境
create-react-app mydemo
彈出配置
如果需要自定義react的配置，需要運行下面的命令把配置文件彈出來。
npm run eject
安裝redux
npm i redux --save
簡單理解
redux簡單用法就是通過它的store來訂閱和發(fā)布信息。
通過subscribe來訂閱action，通過dispatch來觸發(fā)action。reducer中定義來各個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,把action封裝成一個方法，這樣用的時候不用每次定義，避免出錯
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();
//每當dispatch時，訂閱的函數(shù)就會執(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)在有機關(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中訂閱的事件就會執(zhí)行。
redux的異步執(zhí)行
redux中如果需要執(zhí)行異步操作，需要安裝react-thunk插件
npm i react-thunk --save
同時需要redux插件的applyMiddleware
關(guān)鍵代碼
設置其實很簡單，創(chuàng)建store時，把thunk傳遞給它就行了。
import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));
在app.js中增加一個觸發(fā)異步操作的按鈕，reducer中已經(jīng)定義了一個異步的方法。
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
異步調(diào)用方法會返回一個有兩個參數(shù)的方法，兩個參數(shù)都是函數(shù)，第一個是dispatch函數(shù)，第二個是getState函數(shù)。
dispatch觸發(fā)action，getState獲取state的值。
在app.js中增加代碼
<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React組件間通訊傳值，react組件的通信屬于開發(fā)基礎(chǔ)知識,今天來梳理一下,當然rudex還按老規(guī)矩排除在外,如同上篇文章的hooks一樣,單獨梳理2022-11-11
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了React 高階組件應用，詳細的介紹了什么是React高階組件和具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家介紹了React事件綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
react?hooks?計數(shù)器實現(xiàn)代碼
這篇文章主要介紹了react?hooks計數(shù)器實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React狀態(tài)提升案例，所謂 狀態(tài)提升 就是將各個子組件的 公共state 提升到它們的父組件進行統(tǒng)一存儲、處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
React Native可復用 UI分離布局組件和狀態(tài)組件技巧
這篇文章主要為大家介紹了React Native可復用 UI分離布局組件和狀態(tài)組件使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2022-08-08