react redux入门示例

2023-09-14 01:03:05 151

环境准备

为了方便，这里使用create-react-app搭建react环境

create-react-appmydemo

弹出配置

如果需要自定义react的配置，需要运行下面的命令把配置文件弹出来。

npmruneject

安装redux

npmiredux--save

简单理解

redux简单用法就是通过它的store来订阅和发布信息。

通过subscribe来订阅action，通过dispatch来触发action。reducer中定义来各个action要做的事情。

demo代码

reducer定义

constAdd='addGirl',Remove="removeGirl";
exportfunctionreducer(state=0,action){
switch(action.type){
caseAdd:
returnstate+1;
caseRemove:
returnstate-1;
default:
return10;
}
}

//actioncreator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
exportfunctionaddCreator(){
return{type:Add};
}
exportfunctionremoveCreator(){
return{type:Remove};
}

exportfunctionaddAsync(){
return(dispatch,getState)=>{
setTimeout(function(){
dispatch(addCreator());
},1000);
}
}

入口文件index.js

importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
import{createStore}from'redux';
importthunkfrom'redux-thunk';
import{reducer,addCreator,removeCreaator}from'./index.redux';
import{Provider}from'react-redux'
conststore=createStore(reducer);
functionrender(){
ReactDOM.render(
,
document.getElementById('root')
);
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

importReact,{Component}from'react';
import'./App.css';
classAppextendsComponent{
render(){
varstore=this.props.store;
varnum=store.getState();
return(

现在有机关枪{this.props.num}把。
{store.dispatch(this.props.addCreator())}}>add
{store.dispatch(this.props.removeCreator())}}>remove

); } } exportdefaultApp;

通过store的dispatch来触发action，index.js中订阅的事件就会执行。

redux的异步执行

redux中如果需要执行异步操作，需要安装react-thunk插件

npmireact-thunk--save

同时需要redux插件的applyMiddleware

关键代码

设置其实很简单，创建store时，把thunk传递给它就行了。

importthunkfrom'redux-thunk';

conststore=createStore(reducer,applyMiddleware(thunk));

在app.js中增加一个触发异步操作的按钮，reducer中已经定义了一个异步的方法。

exportfunctionaddAsync(){
return(dispatch,getState)=>{
setTimeout(function(){
dispatch(addCreator());
},1000);
}
}

异步调用方法会返回一个有两个参数的方法，两个参数都是函数，第一个是dispatch函数，第二个是getState函数。
dispatch触发action，getState获取state的值。

在app.js中增加代码

{store.dispatch(this.props.addAsync())}}>addAsync

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

react redux入门示例

现在有机关枪{this.props.num}把。

热门推荐

随机推荐