redux工作原理简单入门

IamDLY 发布于2019-08-23 11:58 / 2999人阅读

摘要：首先要明白工作的过程组件通过去触发里面的，然后返回一个新的去改变里面的值。一个应用只有一个，接收作为参数。创建，把和联系起来组件通过组件可以访问到里面特定的和避免因为监听所有变化造成性能问题。

首先要明白工作的过程：组件通过dispatch action去触发store里面的reducer，然后reducer返回一个新的state去改变store里面的值。我们dispatch的action里面必须写明白type是啥，这样reducer里面进行switch action.type的时候才能匹配到需要return的state是什么样的，因为可能没有匹配的type，所以reducer必须写一个默认的return state。
然后开始通过例子说明：
从actions开始吧。 actions其实就是一个对象，这个对象留着给组件dispatch给reducer。我们经常看到的是返回action对象的函数。像这样子

function addOne() {//+1
    return {
        type: "ADD_ONE"
    }
}

function reduceOne() {//-1
    return {
        type: "REDUCE_ONE"
    }
}

function addCustomNumber(number) {//接收一个参数，等着给reducer取出来去改变state的值
    return {
        type: "ADD_CUSTOM_NUM",
        number
    }
}

接下来是reducer，也就是和我们的state产生联系的纯函数。它接收两个参数，第一个是state，可以赋值一个state的初始状态，第二个参数是action，也就是我们的组件通过dispatch一个action的时候，store会把这个action作为参数传给reducer。

const initialState = {count: 0};
const counter = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_ONE":
            return { count: state.count + 1};
        case "REDUCE_ONE":
            return { count: state.count - 1};
        case "ADD_CUSTOM_NUM":
            debugger
            return { count: state.count + action.number}
        default:
            return state;
    }
}

store: 一个应用只有一个store，createStore接收reducer作为参数。如果有多个reducer可以用combineReducer把多个reducer结合在一起传给createStore。

const store = createStore(counter);//创建store，把reducer和state联系起来

组件：通过connect(mapStateToProps, mapDispatchToProps)(组件) 可以访问到store里面特定的state和action,避免因为监听所有state变化造成性能问题。在mapDispatchToProps里面可以用bindActionCreators把dispatch和action creator绑定在一起，这样就直接调用action creator函数就相当于直接dispatch了。最后，要把连接后的组件写在provider里面，才能正常访问到store。于是乎，又回到那个观点，组件触发dispatch action, store里面的reducer会判断action的类型，然后返回新的state，state的变化也会触发组件的更新。

export class Counter extends React.Component {
    render() {
        const { count, addOne, reduceOne, addCustomNumber } = this.props;
        return 
                    
                    {count}
                    
                    
                
    }
}

function mapStateToProps(state) {
    return {count: state.count}
}

function mapDispatchToProps(dispatch) {
    //这样写就不用在组件里面还要去dispatch啦，直接把dispatch和actions createor绑定在一起，
    // 调用actions creator函数就是调用dispatch actions
    return bindActionCreators({addOne, reduceOne, addCustomNumber}, dispatch);
}

const WrappedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);//组件和store, actions连接起来，从而能在组件里面访问store和actions

混合云专线服务工作原理网络工作原理爬虫工作原理 cdn工作原理

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

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

前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0
Redux入门0x101: 简介及`redux`简单实现

摘要：在我看来它们的关系不会比共用开头更深了，所以我就重新开了一个头，但其实是基于前面写的资源中文文档英文文档官方视频学习历程当初为了学习，看了许多的材料，中途曾经放弃两次，但是最后还是勇敢的拿起了它，现在终于勉强弄懂。 0x000 概述这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不...

ssshooter 2019-08-23 11:40 评论0 收藏0
适合初学者观看的深入浅出react全家桶（一）

摘要：本系列文章主要是介绍一些概念原理深入，适合有点基础的初学者观看。是状态容器，提供可预测化的状态管理。使用单向数据流，这意味着只能父组件传递给子组件。工作流工作流如下图关于数据流的原理还有大佬不懂这个话，大佬可以点击传送门本系列文章主要是介绍redux一些概念原理深入，适合有点react基础的初学者观看。分别讲述了Reudx、React Hooks等内容。部分内容涉及源码解析。 wh...

DandJ 2019-08-26 13:44 评论0 收藏0
Vuex — The core of Vue application

摘要：个人看来，一个状态管理的应用，无论是使用，还是，最困难的部分是在的设计。中，并没有移除，而是改为用于触发。也是一个对象，用于注册，每个都是一个用于返回一部分的。接受一个数组或对象，根据相应的值将对应的绑定到组件上。系列文章: Vue 2.0 升（cai）级（keng）之旅 Vuex — The core of Vue application (本文) 从单页应用(SPA)到服务器...

Aldous 2019-08-20 10:25 评论0 收藏0
教你如何打好根基快速入手react，vue，node

摘要：谨记，请勿犯这样的错误。由于在之前的教程中，积累了坚实的基础。其实，这是有缘由的其复杂度在早期的学习过程中，将会带来灾难性的影响。该如何应对对于来说，虽然有大量的学习计划需要采取，且有大量的东西需要学习。前言倘若你正在建造一间房子，那么为了能快点完成，你是否会跳过建造过程中的部分步骤？如在具体建设前先铺设好部分石头？或直接在一块裸露的土地上先建立起墙面？又假如你是在堆砌一个结婚蛋糕...

ddongjian0000 2019-08-23 13:39 评论0 收藏0