社区首页 >问答首页 >没有第一次更新的Redux状态

没有第一次更新的Redux状态
EN

Stack Overflow用户
提问于 2018-10-21 21:44:06
回答 1查看 2.6K关注 0票数 3

我知道有很多相同的问题张贴在这个网站上,但没有一个链接到我的问题。This离我很近,但我还没有使用DB。只是一个完整的react/redux实现。

我在reactstrap modal的示例项目中实现redux,这让我感到困惑,因为我的一个还原器第一次没有更新状态。考虑一下我的redux设置。

Action

代码语言:javascript
代码运行次数:0
复制
export const showModal = (data) => {
   return {
    type: MODAL_TOOL,
    payload: data
  };
}

减速器

代码语言:javascript
代码运行次数:0
复制
 const initialState = {
     isOpen: false
 };
 export default function(state=initialState, action) {
    switch(action.type) {
        case MODAL_TOOL:
            console.log(action.payload.isOpen); //logs true
            return {
                 ...state, 
                 isOpen: action.payload.isOpen
            }
        default: 
             return state;
   }
}

联合收割机

代码语言:javascript
代码运行次数:0
复制
export default combineReducers({
    modal: modalReducer
});

组件

代码语言:javascript
代码运行次数:0
复制
class TaskModel extends Component {
   state = {
       isOpen: this.props.modal.isOpen
   }
   onCreateTask = () => {
        this.props.showModal({
            isOpen: !this.props.modal.isOpen
        });

        this.setState({
            isOpen: this.props.modal.isOpen
        }); 
   }
   render() { 
       return(
          <Button
               size="sm"
               color="dark"
               style={{marginBottom: '2rem'}}
               onClick={this.onCreateTask}
           >
                Add Task
           </Button>
       )
   }       
}
const mapStateToProps = (state) => ({
     modal: state.modal
});

export default connect(mapStateToProps, { showModal })(TaskModel);

当我第一次单击按钮Add Task时,它将不会更新状态,甚至还原器中的日志也不会显示为true。它第二次工作,并更新redux state。我用于这些任务的CRUD在相同的redux设置下运行良好。我有误解什么吗?

EN

回答 1

Stack Overflow用户

发布于 2018-10-21 22:28:27

我建议使用mapDispatchToProps,因为这个函数是用来更新redux存储的。例如,您应该在单击处理程序中调用onTodoClick,如下所示。更新redux商店。现在你将在你的行动中得到'toggleTodo‘。接下来是使用mapStateToProps获取redux数据。它应该是这样运作的。

代码语言:javascript
代码运行次数:0
复制
const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (isOpen) => {
      dispatch(toggleTodo(isOpen))
    }
  }
}

这里是一些链接,以获取更多关于这一概念。

https://learn.co/lessons/map-dispatch-to-props-readme

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52923018

复制
相关文章
在PHP中 为什么in_array(0, ['a', 'b', 'c'])返回true
直观上看,0没有在数组['a', 'b', 'c']中,也不会等于abc这个字符串。
用户9076598
2022/03/02
2.8K0
在Java中为什么不同的返回类型不算方法重载?
方法重载是指在同一个类中,定义了多个同名方法,但每个方法的参数类型或者是参数个数不同就是方法重载。 比如以下 4 个 method 方法就可以称之为方法重载,如下代码所示:
磊哥
2022/01/20
3.4K0
在Java中为什么不同的返回类型不算方法重载?
为什么 2!=false 和 2!=true 返回的都是true
由上图可见,2 != false 和 2 != true 返回的值竟然都是true,那么为什么呢,请看下文:
啦啦啦啦
2024/09/07
1100
为什么 2!=false 和 2!=true 返回的都是true
为什么in_array(0, ['a', 'b', 'c'])返回true
在PHP中,数据会自动转换类型后再进行比较。 这样可能会导致一些费解的现象: in_array(0, ['a', 'b', 'c']) // 返回bool(true),也就相当于数组中有0 array_search(0, ['a', 'b', 'c']) // 返回int(0),也就是第一个值的下标 0 == 'abc' // 返回bool(true),也就相当于相等 这两个表达式都返回true。 直观上看,0没有在数组['a', 'b', 'c']中,也不会等于abc这个字符串。 那怎么会返回tr
wangxl
2018/03/09
1.9K0
Java中的LinkedList的方法的应用
在Java中,LinkedList提供了丰富的方法,可以模拟链式队列,链式堆栈等数据结构,为用户带来了极大的方便,下面看看这些方法的用法:
全栈程序员站长
2022/07/04
3150
为什么1000==1000返回false,100==100返回true?
这可能是个讨论得较多的话题,但是我觉得它很有趣:为什么1000==1000返回false,100==100返回true?
三哥
2018/12/19
1.2K0
小心这个陷阱: 为什么JS中的 every()对空数组总返回 true
JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式。最近在重构一些使用 every() 方法的代码时,发现实际上并不理解其背后的逻辑。在我的理解中,我认为回调函数必须被调用并返回true , every() 才会返回 true ,但实际上并非如此。对于一个空数组, every() 无论回调函数是什么都会返回 true ,因为那个回调函数从未被调用过。考虑以下情况:
前端小智@大迁世界
2023/09/21
2230
奇怪的Java题:为什么128 == 128返回为false,而127 == 127会返回为true?
奇怪的Java题:为什么128 == 128返回为false,而127 == 127会返回为true? 在回答这个问题之前,我们先来看看int和Integer的对比,一步步揭开问题的答案。 1. i
互扯程序
2019/06/19
2.3K0
面试官:为什么“false == []”和“false == ![]”都返回true?
英文 | https://javascript.plainenglish.io/interviewer-why-do-false-and-false-both-return-true-6e7944220337
winty
2023/01/09
9700
盘点LinkedList集合和LinkedList中定义的方法
LinkedList类是集合新增元素和删除元素效率比较好,该集合的里面维护一个双向循环的链表,链表中它的每一个元素可以引用方式记下前一个元素和后一个元素,把所有的元素连接起来就可以了。
Java进阶者
2021/07/23
8670
为什么1000 == 1000返回为False,而100 == 100会返回为True?
这是我们今天要讨论的话题,因为我觉得它非常的有趣。 如果你运行如下代码: Integer a = 1000, b = 1000; System.out.println(a == b);//1 Integer c = 100, d = 100; System.out.println(c == d);//2 你会得到以下运行结果: false true 我们知道,如果两个引用指向同一个对象,那么==就成立;反之,如果两个引用指向的不是同一个对象,那么==就不成立,即便两个引用的内容是一样的。因此,结果
顶级程序员
2018/04/26
1.7K0
Java中 3*0.1 == 0.3 返回值 false ,1*0.3 == 0.3 返回值 true
但是有的计算结果不是的,比如4*0.1结果就是0.4;这个是《二进制浮点数算法》的计算 原因,不深究,记一下就行了。
全栈程序员站长
2022/08/09
1.8K0
LinkedList - 2. Add Two Numbers
You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.
ppxai
2020/09/23
2650
Java 中如何限制方法的返回时间
可以使用 JDK 中的 ExecutorService 方法来对调用的方法进行处理。
HoneyMoose
2023/02/10
3.1K0
Java 中如何限制方法的返回时间
为什么Python中的None is None is None == True
最近在StackOverflow上看到了一个问题,为什么Python中的None is None is None返回True,看到大家的讨论后对Python中的比较运算有了更深的认识。
杜逸先
2018/06/28
2.3K0
为什么Python中的None is None is None == True
HashMap中add()方法的源码学习
HashMap中实际是维护了一个Node数组,用来存储数据,下面看一下Node源码:
会说话的丶猫
2020/08/13
7030
Java中ArrayList与LinkedList的区别
Java中ArrayList与LinkedList的区别 一般大家都知道ArrayList和LinkedList的区别:       1. ArrayList的实现是基于数组,LinkedList的实现是基于双向链表。        2. 对于随机访问,ArrayList优于LinkedList       3. 对于插入和删除操作,LinkedList优于ArrayList   4. LinkedList比ArrayList更占内存,因为LinkedList的节点除了存储数据,还存储了两个引用,一个指向前
nnngu
2018/03/15
1.5K0
Java之手写LinkedList(中)
由于今天要写add(int index,T t)方法,索引会把内部类中的递归的get(int index)改造成获取节点,不直接获取元素,外部类的get方法也会稍加改动。
用户5224393
2019/08/20
4120
Java中Arraylist与linkedlist的区别
List: 有顺序的,元素可以重复 遍历:for 迭代 排序:Comparable Comparator Collections.sort() ArrayList:底层用数组实现的List 特点:查询效率高,增删效率低 轻量级 线程不安全 遍历: ArrayList<String> al=new ArrayList(); al.add("winsun"); al.add("weixin"); al.add("mybole"); for(int i=0;i<al.size();i
闵开慧
2018/03/30
9660
为什么 Java 中1000==1000为false,而100==100为true?
基本知识:我们知道,如果两个引用指向同一个对象,用 == 表示它们是相等的。如果两个引用指向不同的对象,用 == 表示它们是不相等的,即使它们的内容相同。
终码一生
2022/04/14
3570

相似问题

关于Java中LinkedList的问题

20

查找返回null而不是集合的方法(在Java中)

10

Java方法返回无界类型

20

LinkedList --为什么元素上没有直接的.next()?

10

在方法中不返回任何内容的替代方法

40
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文