React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件5(状态管理之Redux的使用①简单使用)---2018.03.20

2、React第三方组件5(状态管理之Redux的使用②TodoList上)---2018.03.21

3、React第三方组件5(状态管理之Redux的使用③TodoList中)---2018.03.22

4、React第三方组件5(状态管理之Redux的使用④TodoList下)---2018.03.23

5、React第三方组件5(状态管理之Redux的使用⑤异步操作)---2018.03.26

6、React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)---2018.03.27

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

关于Redux的相关知识,请查阅阮老师的博客:

Redux 入门教程(一):基本用法 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html Redux 入门教程(二):中间件与异步操作 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html Redux 入门教程(三):React-Redux 的用法 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

我这里就不对这些概念多做介绍!

我们上来直接撸码!

安装 redux react-redux

npm i -S redux react-redux

1、在demo目录下新建redux文件夹,并建立redux1文件夹

2、在redux下新建Index.jsx

import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Redux1 from './redux1/Index'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/Redux/Redux1" activeClassName="selected">Redux1</NavLink>
            </div>
            <Route exact path={`${match.url}`}
                   render={() => (<Redirect to={`${match.url}/Redux1`}/>)}/>
            <Route path={`${match.url}/Redux1`} component={Redux1}/>
        </div>
    </HashRouter>
;

export default Index;

3、修改demo下Index.jsx

4、在redux1下建立 Index.jsx文件

import React from 'react';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                redux
            </div>
        );
    }
}

export default Index;

5、打开浏览器,应该是下图这样的

6、写业务代码

<div>
    0
    <button>+</button>
</div>

我们希望点击按钮,数字可以加1

7、我们新建reducer.js

export default (state = {
    num: 0
}, action)=> {
    switch (action.type) {
        case 'ADD':
            return {num:state.num + action.num};
        default:
            return state;
    }
};

8、修改Index.jsx

import React from 'react';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';
import reducer from './reducer'

const store = createStore(reducer);

class Index extends React.Component {
    render() {
        return (
            <div>
                {this.props.storeState.num}
                <button onClick={() => this.props.dispatch({type: 'ADD', num: 1})}>+</button>
            </div>
        );
    }
}

const mapStateToProps = state => ({storeState: state});
const Main = connect(
    mapStateToProps
)(Index);

export default () =>
    <Provider store={store}>
        <Main/>
    </Provider>
;

9、查看浏览器

本文完

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

9820
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

14820
来自专栏从零开始学自动化测试

Selenium2+python自动化28-table定位

前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

30570
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

16420
来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

210100
来自专栏Keegan小钢

Android样式的开发:Style篇

前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式。 哪些该定义成统一的样式呢?举几个例子吧:

18420
来自专栏python3

tkinter -- Place

注意 bt2放置的位置是在 root 的(0,0)处,而 button1放置的位置是在 lb1的(0,0)处,原因是由于 bt1使用了 in 来指定放置的窗口为...

8610
来自专栏Java成神之路

为博客园添加目录的方法总结

参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

15420
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

999130
来自专栏小程序之家

如何使用小程序视图容器组件

在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

6.6K30

扫码关注云+社区

领取腾讯云代金券