文档章节

前端那些事之react--redux篇

上官清偌
 上官清偌
发布于 2017/04/27 14:08
字数 191
阅读 15
收藏 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
码字总数 118568
作品 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
07/04
0
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
975
2
react学习资源汇总

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

逆蝶_Snow
2016/12/01
298
0
iOS开发者React Native学习路线

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

卡奇匠
2016/12/13
18
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
0

没有更多内容

加载失败,请刷新页面

加载更多

awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
29分钟前
0
0
Spring Cloud Eureka Server高可用之:在线扩容

本文共 1591字,阅读大约需要 6分钟 ! 概述 业务微服务化以后,我们要求服务高可用,于是我们可以部署多个相同的服务实例,并引入负载均衡机制。而微服务注册中心作为微服务化系统的重要单元...

CodeSheep
41分钟前
1
0
内网esxi主机上安装CoreOS虚拟机

CoreOS是一个为专门运行容器而设计的轻量级linux发行版,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度。它没有包管理工具,运行容器化应用以提供服务;默...

hiwill
今天
1
0
20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
3
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部