Redux系列02：一个炒鸡简单的react+redux例子

hidogs 发布于2019-08-19 17:17 / 3151人阅读

摘要：前言在系列从一个简单例子了解里面，我们已经对的核心概念做了必要的讲解。接下来，同样是通过一个简单的例子，来讲解如何将跟应用结合起来。接下来就看实际例子，一个简单到不存在实用价值的。这部分会在后续展开

前言

在《Redux系列01：从一个简单例子了解action、store、reducer》里面，我们已经对redux的核心概念做了必要的讲解。接下来，同样是通过一个简单的例子，来讲解如何将redux跟react应用结合起来。

我们知道，在类flux框架设计中，单向数据流转的方向无非如下：

转换成redux的语言，就是这个样子。接下来就看实际例子，一个简单到不存在实用价值的todo list。

例子：实际运行效果

本文的代码示例可以在github上下载，点击查看。README里有详细的运行步骤，照着做就可以了，这里也一起贴出来。

首先安装依赖项

npm install

如果还没安装browserify，那么也要安装一下

npm install -g browserify

然后，在当前目录运行如下脚本

browserify app.js -o bundle/app.js -t [ babelify --presets [ es2015 react ] ]

在浏览器里打开index.html，就可以看到效果了。运行效果如下，很挫吧。。。

例子：实际代码

由于代码实在太简单，这里就直接贴出来了。

actionCreator

首先，定义actionCreator。

// action creator
var addTodoActions = function(text){
    return {
        type: "add_todo",
        text: text
    };
};

reducer

然后，定义reducer，可以看到是对add_todo事件进行了处理

// reducers
var todoReducer = function(state, action){
    
    if(typeof state === "undefined"){
        return [];
    }
    
    switch(action.type){
        case "add_todo":
            return state.slice(0).concat({
                text: action.text,
                completed: false
            });
            break;
        default:
            return state;
    }
};

接着，以前面定义的reducer为参数，创建store。

store

var store = Redux.createStore(todoReducer);

将react跟store进行绑定

最后，到关键步骤啦，可以看到：

在getInitialState里：通过store.getState()获取数据进行初始的渲染。

在componentDidMount里：监听store的状态变化，当状态变化时，触发onChange回调。

在handleAdd里：通过store.dispatch(addTodoActions(value))修改state。（步骤二对这个进行了监听）
4.在onChange里：获取最新的state，并重新渲染视图

var App = React.createClass({
    getInitialState: function(){
        return {
            items: store.getState()
        };
    },
    componentDidMount: function(){
        var unsubscribe = store.subscribe(this.onChange);
    },
    onChange: function(){
        this.setState({
            items: store.getState()
        });
    },
    handleAdd: function(){
        var input = ReactDOM.findDOMNode(this.refs.todo);
        var value = input.value.trim();

        if(value)
            store.dispatch(addTodoActions(value));

        input.value = "";
    },
    render: function(){
        return (
            
                
                
                
                    {this.state.items.map(function(item){
                        return {item.text};
                    })}
                
                        
            );
    }
});

ReactDOM.render(
    , 
    document.getElementById("container")
    );

写在后面

整个例子看下来其实非常flux style，非常简单，连异步都没有涉及，所以也就不花过多篇幅进行讲解，相信看下代码，跑下文中的demo就可以理解了。

实际项目不可能像文中的这么简单，所以一般redux还要结合react-redux、redux-thunk等库使用，才能用到实战中去。这部分会在后续展开 :)

idc机房托管混合云 react-redux React_Redux_Appointm react-router-redux Redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78372.html

React 升级：Redux

摘要：正如我们前面的教程所提到的，在组件之间流通数据更确切的说，这被叫做单向数据流数据沿着一个方向从父组件流到子组件。这就是如何使数据流变得更简单的原因。它是一种倾向单向数据流比如的设计模式。这是因为总是接受和返回状态用来更新。前言近期接触React项目，学到许多新知识点，网上教程甚多，但大多都把知识点分开来讲，初学者容易陷入学习的误区，摸不着头脑，本人在学习中也遇到许多坑。此篇文章是笔...

garfileo 2019-08-20 15:44 评论0 收藏0
React组件设计实践总结05 - 状态管理

摘要：要求通过要求数据变更函数使用装饰或放在函数中，目的就是让状态的变更根据可预测性单向数据流。同一份数据需要响应到多个视图，且被多个视图进行变更需要维护全局状态，并在他们变动时响应到视图数据流变得复杂，组件本身已经无法驾驭。今天是 520，这是本系列最后一篇文章，主要涵盖 React 状态管理的相关方案。前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 评论0 收藏0
React系列之 Redux 架构模式

摘要：原文地址没想到这篇文章这么晚才出，最近发生了太多的事情，已致于心态全无，最终也离开了现在的公司，没想到是这么的狼狈一个人的光芒可以放到很大也可以小到微乎其微，如果不能好好的规划最终也只能默默的承受世上没有相同的感同身受，感受真实才能真正的原文地址：https://gmiam.com/post/react-... 没想到这篇文章这么晚才出，最近发生了太多的事情，已致于心态全无，最终也离...

xfee 2019-08-20 12:06 评论0 收藏0
重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程

摘要：是前端开发领域新兴的方法论体系，它继承了与编程理念，在技术上有不少创新。但专利与开源协议是平行的两个世界，改底层也不大容易解决问题。此外，要求在中结合各属性的是否变化，判断是否该触发更新。 ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系，它继承了 MVVM 与 FRP 编程理念，在技术上有不少创新。本文从专利稿修改而来...

Cciradih 2019-08-21 17:12 评论0 收藏0
重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程

摘要：是前端开发领域新兴的方法论体系，它继承了与编程理念，在技术上有不少创新。但专利与开源协议是平行的两个世界，改底层也不大容易解决问题。此外，要求在中结合各属性的是否变化，判断是否该触发更新。 ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系，它继承了 MVVM 与 FRP 编程理念，在技术上有不少创新。本文从专利稿修改而来...

zsy888 2019-08-05 17:56 评论0 收藏0