React结合Redux的使用

码影云栖客
• 阅读 2126

React结合Redux的使用

搭建环境

安装react

  • 全局安装create-react-app

npm install -g create-react-app
  • 创建目录

create-react-app react-redux
  • 进入目录

cd react-redux
  • 运行

npm start

安装react-redux

  • 装到配置文件里面

 npm install react-redux --save

如果这条命令安装不上的话,可以使用cnpm安装;

编写代码

创建文件

  • component文件夹,创建Calc.js文件

Calc.js

import React from 'react';

const Calc = (props) => {
    let{number,onPlus,onMinus,onOdd,onAnync}=props;
    return (
        <div>
           <span id="spanResult">{number}</span>
            <br/>
            <input id="btn1" type="button" value="plus" onClick={onPlus}/>
            <input id="btn2" type="button" value="minus" onClick={onMinus}/>
            <input id="btn3" type="button" value="if odd plus" onClick={onOdd}/>
            <input id="btn4" type="button" value="anync plus" onClick={onAnync}/> 
        </div>
    );
};

export default Calc;
  • container文件夹,创建CalcContainer.js文件

CalcContainer.js

import React from 'react';
import Calc from '../component/Calc';
import {connect} from 'react-redux';

const mapStoreToProps=(state,ownProps)=>{
    return{
        number:state
    }
}

const mapDispatchToProps=((dispatch,ownProps)=>{
   return{
        onPlus:()=>{
        dispatch({
        type:"plus"
        })
    },
        onMinus:()=>{
        dispatch({
            type:"jian"
            })
    },
        onOdd:()=>{
        dispatch({
            type:"odd_plus"
            })
    },
        onAnync:()=>{
        setTimeout(function(){
            dispatch({
                type:"async_plus"
            })
            },1000)
         }
    }
})

let CalcContainer=connect(mapStoreToProps,mapDispatchToProps)(Calc);

export default CalcContainer;
  • reducer文件夹,创建index.js文件

index.js

function reducer(state=0,action){
            switch(action.type){
                case "plus":{
                    state=state+1;
                    break;
                }
                case "jian":{
                    state=state-1;
                    break;
                }
                case "odd_plus":{
                    if(state%2===1){
                        state+=1;
                    }
                    break;
                }
                case "async_plus":{
                   state=state+1;
                    break;
                }
                default:{
                  break;
                }
            }
            return state;
        }

export default reducer;
  • App.js文件

import React, { Component } from 'react';

import Calc from './component/Calc';

import CalcContainer from './container/CalcContainer';


class App extends Component {
  constructor(props){
      super();
  }

  render() {
    return (
        
          <CalcContainer>
            <Calc />
          </CalcContainer>
    );
  }
}

export default App;
  • 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 reducer from './reducer/index';
import {Provider} from 'react-redux';

let store =createStore(reducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root'));
registerServiceWorker();

接下来就让我们看看效果吧:

React结合Redux的使用

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
MLtech MLtech
4年前
Create React App
CreateReactAppCreateReactAppFacebook开源了React前端框架(MITLicence),也同时提供了React脚手架createreactapp(ht
Jacquelyn38 Jacquelyn38
4年前
25、react入门教程
25、react入门教程25、react入门教程0.React介绍0.1什么是React?React(有时称为React.js或ReactJS)是一
徐小夕 徐小夕
4年前
《彻底掌握redux》之开发一个任务管理平台(上)
前言redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳
Stella981 Stella981
3年前
React16.4 开发简书项目 从零基础入门到实战
第1章课程导学本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。11课程导学第2章React初探本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。21React简介22React开发环境准备23工程目录
Stella981 Stella981
3年前
Redux入门实战——todo
1.前言在之前的博客中,我写了一篇关于todolist实现的博客,一步一步详细的记录了如何使用基础的React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观的认识和粗浅的理解。近期,个人学习了一下Redux,又将该项目使用ReactRedux的方式进行了实现。本片内容记录以下实践的过程。通过本实例,
Easter79 Easter79
3年前
TiDB Pre
8月30日,TiDB发布PreGA版。该版本对MySQL兼容性、SQL优化器、系统稳定性、性能做了大量的工作。TiDB:SQL查询优化器调整代价模型优化索引选择,支持不同类型字段比较的索引选择支持基于贪心算法的JoinReorder
Stella981 Stella981
3年前
Jenkins配置下拉菜单联动效果
  在使用Jenkins集成时,经常需要配置一些环境信息,由于测试、线上、预发布需要切换环境和域名,需要在Jenkins中配置下拉菜单联动效果。  首先选择参数化构建过程,然后首先配置环境,环境分为:测试环境、预发布环境、正式环境,选择的组件为ChoiceParameter,Name定义为environment,选项为test、pre、onli
Stella981 Stella981
3年前
Pre
PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin\_44385565/article/details/89737224(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fweixin_443855
Stella981 Stella981
3年前
Android MVP模式
1、MVP模式简介相信大家对MVC都是比较熟悉了:MModel模型、VView视图、CController控制器,MVP作为MVC的演化版本,那么类似的MVP所对应的意义:MModel模型、VView视图、PPresenter表示器。从MVC和MVP两者结合来看,Controlller/Pre