初学redux

gaosboy 发布于2019-08-20 16:32 / 951人阅读

摘要：加法操作减法操作当前应用的所有状态都保存在的树中，这是一个集合想要修改中的数据，必须要发送，可以在任何时候调用发送会作为第二个参数触发创建时传入的函数第一个参数是当前的树函数会根据中的信息，返回一个新的树存入这使得程序的运行在界面出现之前

import { createStore } from "redux"

const initState = {
    count:0
}

const ADD_TODO = {
    type:"ADD",
    payload:"加法操作"
}

const LESS_TODO = {
    type:"LESS",
    payload:"减法操作"
}

const counter = (state = initState,action) => {
    switch(action.type){
        case "ADD":
            return {
                count:state.count+1
            }
        case "LESS":
            return {
                count:state.count-1
            }
        default:
            return state;
    }
}

let  store = createStore(counter);

let unlistener = store.subscribe(()=>{
    console.log(store.getState())
})

store.dispatch(ADD_TODO);
store.dispatch(ADD_TODO);
store.dispatch(ADD_TODO);
store.dispatch(LESS_TODO);

unlistener()

当前应用的所有状态都保存在store的state树中，这是一个集合
想要修改state中的数据，必须要发送action，可以在任何时候调用dispatch发送action
action会作为第二个参数触发创建store时传入的Reducer函数,第一个参数是当前的state树
Reducer函数会根据action中的信息，返回一个新的state树存入store
这使得程序的运行在界面出现之前就变得可以预测：
UI组件使用初始的state树，当界面需要改变时，触发action，改变store中state树的数据,然后重新渲染显示

海外云主机私有云 Redux redux源码 redux-saga react-redux

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

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

适合初学者观看的深入浅出react全家桶（一）

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

DandJ 2019-08-26 13:44 评论0 收藏0
【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
react-redux-express异步前后端数据交互(面向初学者,高手勿进)

摘要：花了整整三天的时间来解决一个非常非常小的问题想要把一点心得体会记录下来首先是问题的提出前端如果是后端是如何进行数据的交互总体思路以前接触的时候前端模板用的是那时候就有些不理解的地方最为不理解的几个问题是前端和后端怎么配合特别是前端特别复杂的花了整整三天的时间来解决一个非常非常小的问题.想要把一点心得体会记录下来.首先是问题的提出:前端如果是react,后端是express,如何进行数...

KaltZK 2019-08-19 18:44 评论0 收藏0
Redux概念之二: Redux的三大原则

摘要：就是应用程序领域的状态，它是类型中的模型的设计的概念，这设计是由架构而来的，在原本的架构中是允许多个的结构，简化为只有单一个。的设计中是与中的相比，它们之间有一些类似的设计。 Redux里的强硬规则与设计不少，大部份都会与FP(函数式程序开发)、改进原本的Flux架构设计有关。Redux官网文档上的三大基本原则，主要是因为有可能怕初学者不理解Redux中的一些限制或设计，所以先写出来说...

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

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

ideaa 2019-05-23 11:48 评论0 收藏0