文档章节

前端那些事之react--redux篇

上官清偌
 上官清偌
发布于 2017/04/27 14:08
字数 191
阅读 15
收藏 0
点赞 0
评论 0

react-redux

  • 下载:npm install --save react-redux
  •        npm install --save redux
    

一个简易的redux的实现

流程如下

输入图片说明

import React from 'react';
import {Provider,connect} from 'react-redux'
import {createStore,combineReducers} from 'redux'
const todo = function (state, active) {
    switch (active.type) {

    }
    return {
        name: 'todo-mvc',
        items: [{name: 'aa', active: false}, {name: 'bbb', active: true}]
    }
}
const fs = (state, active) => {
    switch (active.type) {

    }
    return {
        name: 'todo-mvc',
        items: [{name: 'aa', folder: false, ext: '.txt'}, {name: 'bbb', folder: true, ext: ''}]
    }
}

//合并redux
const reduce = combineReducers({
    todo,
    fs
})
//创建全局的redux
const store = createStore(reduce);

const A = React.createClass({
    render(){
        const {name,items} =this.props;
        const  nodes=items.map((obj,i)=>{
            // console.log(obj.name);
            return (
                <p key={i}>{obj.name}</p>
            )
        })
        return (
            <div>
                {nodes}
            </div>
        )
    }
})
//给store赋值属性的涵数
var fn1= (store)=>{
    return {
        name:store.todo.name,
        items:store.todo.items
    }
}
//连接器connext,连接store和视图之间的关系
const App=connect(fn1)(A);
const ReduxStudy = React.createClass({
    render(){
        return (
            <div>
                <Provider store={store}>
                    <App/>
                </Provider>
            </div>
        )
    }
})
export default ReduxStudy;

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 84
码字总数 117370
作品 0
浦东
程序员
[译] 如何让你的 React 应用完全的函数式,响应式,并且能处理所有令人发狂的副作用

原文地址:How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects 原文作者:Luca Matteis 译文出自:掘金翻译计划 译者:Zhang......

zhe.zhang ⋅ 2017/03/23 ⋅ 0

iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠 ⋅ 2016/12/13 ⋅ 0

react学习资源汇总

react-tutorial a tutorial react collection and sort,let you easily get started and organized 主要是搜集整理生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 设计思...

逆蝶_Snow ⋅ 2016/12/01 ⋅ 0

基于 React.js + Redux + Bootstrap 的 Ruby China 示例

最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本,...

rina_liuzhen ⋅ 2016/10/21 ⋅ 2

日了狗!Redux最简单的入门介绍

日了狗了,狗日的react+redux的水太深了。 哥哥我已经连续研究了很近了,看了那些狗日的写的redux简单示例。妈蛋的,没一个写的好的。看了半天云里雾里,狗日的不知道提供一个最简单的打包下...

supperman ⋅ 2016/09/14 ⋅ 0

ELSE 技术周刊(2017.09.25期)

业界动态 Facebook将修改React、Jest、Flow 与 Immutable.js授权许可 Facebook妥协?将用MIT协议重新授权我们的开源项目React、Jest、Flow和Immutable.js。 ThinkJS 3 正式版发布! ThinkJS ...

风清洋ELSE ⋅ 2017/09/25 ⋅ 0

实例讲解基于 Flask+React 的全栈开发和部署

简介 我有时在 Web 上浏览信息时,会浏览 Github Trending, Hacker News 和 稀土掘金 等技术社区的资讯或文章,但觉得逐个去看很费时又不灵活。后来我发现国外有一款叫 Panda 的产品,它聚合...

funhacks ⋅ 2017/11/29 ⋅ 0

精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家 ⋅ 2016/05/25 ⋅ 0

Redux管理你的React应用

因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ,我会在这...

王春-海子 ⋅ 2016/08/10 ⋅ 0

投稿003期 | React进阶路 ——《深入浅出React和Redux》

书名:《深入浅出React和Redux》 作者:程墨 现如今,前端技术发展欣欣向荣,出现了很多出色的前端框架,Angular、React、Vue更是一股热潮,很多前端开发人员都会去学习至少一种前端框架。就...

__innocence ⋅ 05/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 26分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 37分钟前 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 42分钟前 ⋅ 0

B树和B+树的总结

B树 为什么要B树 磁盘中有两个机械运动的部分,分别是盘片旋转和磁臂移动。盘片旋转就是我们市面上所提到的多少转每分钟,而磁盘移动则是在盘片旋转到指定位置以后,移动磁臂后开始进行数据的...

浮躁的码农 ⋅ 45分钟前 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

centos7 git安装

由于centos中的源仓库中git不是最新版本,需要进行源码安装。 1、查看yum仓库git信息 [root@iZm5e3d4r5i5ml889vh6esZ zh]# yum info gitLoaded plugins: fastestmirrorLoading mirror s...

xixingzhe ⋅ 今天 ⋅ 0

input file 重复上传同一张图片失效的解决办法

解决办法 方法一:来回切换input[type='file']的type属性值,可以是‘text’,'button','button'....,然后再切换回来‘file’ 方法二:每次取消图片预览后,重置input[type='file']的value的...

时刻在奔跑 ⋅ 今天 ⋅ 0

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 今天 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部