文档章节

前端那些事之react--redux篇

上官清偌
 上官清偌
发布于 2017/04/27 14:08
字数 191
阅读 17
收藏 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
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
原生实现一个react-redux的代码示例

自己动手实现一个react-redux之前试过自己动手实现一个redux,这篇blog主要记录动手实现一个react-redux的过程。 这个react-redux还有一点点小瑕疵,我以一个计数器作为例子来实现的。 这是目...

peakedness丶
11/15
0
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
10/29
0
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
日了狗!Redux最简单的入门介绍

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

supperman
2016/09/14
19
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

没有更多内容

加载失败,请刷新页面

加载更多

Ext grid 渲染

// 单元格字体颜色渲染function renderer_Meta_useStatus(value, cellmeta, record,rowIndex, columnIndex, store){ var color = ""; if("空闲"==value){ color = "green";......

MoksMo
26分钟前
4
0
log4j2在spring中的配置

<?xml version="1.0" encoding="UTF-8"?><!--日志级别以及优先级排序: OFF > FATAL > ERROR > WARN > INFO > DEBUG > TRACE > ALL --><!--Configuration后面的status,这个用于设置l......

TonyTaotao
31分钟前
3
0
java 中间变量缓存机制(i++,++i)

public class Test { public static void main(String[] args) { int i = 0; i = i ++ ; System.out.println(i); } } 答案是 0 如果是 i = ++......

shzwork
39分钟前
5
0
初识多线程及其原理-笔记

什么情况下应该使用多线程? 通过并行计算提高程序执行性能 需要等待网络、I/O响应导致耗费大量的执行时间, 可以采用异步线程的方式来减少阻塞 tomcat7 以前的io模型 客户端阻塞 线程级别阻...

Java搬砖工程师
50分钟前
2
0
webpack4 css打包、压缩、分离、去重等优化配置详解

Webpack 4 目前版本已经到了4.27 相较于前面的版本还是有一些改动的,具体可以参考升级指南 迁移到新版本 这里只介绍 css 的 打包、压缩、分离、去重 的方法; 不懂的或者有更优的方案,欢迎...

zerokb-小浪
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部