zoukankan      html  css  js  c++  java
  • bindActionCreators

    在 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

    没有介绍这个,react-redux,需要自动加入actions

    connect

    connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:

    import * as actionCreators from './actionCreators'
    import { bindActionCreators } from 'redux'
    
    function mapStateToProps(state) {
      return { todos: state.todos }
    }
    
    function mapDispatchToProps(dispatch) {
      return { actions: bindActionCreators(actionCreators, dispatch) }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(Component)
    

    它会让我们传递一些参数:mapStateToProps,mapDispatchToProps,mergeProps(可不填)和React组件。

    之后这个方法会进行一系列的黑魔法,把state,dispatch转换成props传到React组件上,返回给我们使用。

    mapStateToProps:

    mapStateToProps 是一个普通的函数。

    当它被connect调用的时候会为它传递一个参数State。

    mapStateToProps需要负责的事情就是 返回需要传递给子组件的State,返回需要传递给子组件的State,返回需要传递给子组件的State,(重要的事情说三遍。。。。)然后connect会拿到返回的数据写入到react组件中,然后组件中就可以通过props读取数据啦~~~~

    它看起来是这样的:

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

    因为stat是全局State,里面包含整个项目的所有State,但是我不需要拿到所有State,我只拿到我需要的那部分State即可,所以需要返回 state.list 传递给组件

    mapDispatchToProps:

    与mapStateToProps很像,mapDispatchToProps也是一个普通的函数。

    当它被connect调用的时候会为它传递一个参数dispatch。

    mapDispatchToProps负责返回一个 dispatchProps

    dispatchProps 是actionCreator的key和dispatch(action)的组合。

    dispatchProps 看起来长这样:

    {
      addItem: (text) => dispatch(action)
    }
    

    connect 收到这样的数据后,会把它放到React组件上。然后子组件就可以通过props拿到addItem并且使用啦。

    this.props.addItem('Hello World~');
    

    如果觉得复杂,不好理解,,那我用大白话描述一下

    就是通过mapDispatchToProps这个方法,把actionCreator变成方法赋值到props,每当调用这个方法,就会更新State。。。。额,,这么说应该好理解了。。

    bindActionCreators:

    但如果我有很多个Action,总不能手动一个一个加。Redux提供了一个方法叫 bindActionCreators 。

    bindActionCreators 的作用就是将 Actions 和 dispatch 组合起来生成mapDispatchToProps 需要生成的内容。

    它看起来像这样:

    let actions = {
      addItem: (text) => {
        type: types.ADD_ITEM,
        text
      }
    }
    
    bindActionCreators(actions, dispatch); // @return {addItem: (text) => dispatch({ type: types.ADD_ITEM, text })}
  • 相关阅读:
    使用css制作三角
    BZOJ3029: 守卫者的挑战
    Codeforces 442B. Andrey and Problem
    嘴巴题8 BZOJ2318: Spoj4060 game with probability Problem
    嘴巴题7 BZOJ1426: 收集邮票
    嘴巴题6 BZOJ3450JoyOI1952 Easy
    BZOJ1453: [Wc]Dface双面棋盘
    BZOJ2957: 楼房重建
    BZOJ4515: [Sdoi2016]游戏
    BZOJ3679: 数字之积
  • 原文地址:https://www.cnblogs.com/danghuijian/p/5897719.html
Copyright © 2011-2022 走看看