react - 20 redux 中传递parameter, click中传递参数

栏目: 服务器 · 发布时间: 5年前

内容简介:注意:具体代码在参考;1. Button 的click事件中, 如果使用bind(this), 那么 bind(this, 33) 就可以把 33 作为参数传到这个方法中。

注意:具体代码在 https://github.com/sg552/demo_redux_with_async_storage

参考; https://stackoverflow.com/questions/43017807/react-native-onpress-binding-with-an-argument

1. Button 的click事件中, 如果使用bind(this), 那么 bind(this, 33) 就可以把 33 作为参数传到这个方法中。

<Button

title={i18n.t('click_to_change_language', {locale: 'en'})}

onPress={this.changeLanguage.bind(this, 'en')}

>

2. redux中,如果要传递参数,该肿么办呢?

参考; https://stackoverflow.com/a/35769199/445908

2.1 action creator 中定义的方法要有参数,例如:

export const changeLanguage = (new_language) => {
  result= {
    type: CHANGE_LANGUAGE,
    new_language  // created a key named "new_language" with value such like 'en', 'zh'
  }
  return result
}

2.2 reducer 中要有处理的方法,见下面代码中的 action.new_language:

import { INCREASE_COUNT, CHANGE_LANGUAGE } from './types'

const initialState = {
  count: 0,
  language: 'en'
}

export const countReducer  = (state = initialState, action ) => {
  switch(action.type){
    case INCREASE_COUNT:
      console.info("== hi , before +1, count: " + state.count)
      return {
        count: state.count + 1
      }
    default:
      return state
  }
}

export const languageReducer = (state = initialState, action) => {
  switch(action.type){
    case CHANGE_LANGUAGE:
      return {
        language: action.new_language
      }
    default:
      return state
  }
}

2.3 视图中要传递参数,例如:

changeLanguage(language){
    this.props.changeLanguage(language)
  }
//...
        <Button
          title={i18n.t('click_to_change_language', {locale: 'en'})}
          onPress={this.changeLanguage.bind(this, 'en')}
        >
        </Button>

2.4 最后,在mapDispatchToProps中,要修改:

const mapStateToProps = state => {
  return {
    count: state.countReducer.count,
    language: state.languageReducer.language
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increaseCountByOne: () => {
      dispatch(increaseCount())
    },

    // 这里要把这个 new_language方法传递进来,上面的函数用来对比的
    changeLanguage: (new_language) => {
      dispatch(changeLanguage(new_language))
    }
  }
}

以上所述就是小编给大家介绍的《react - 20 redux 中传递parameter, click中传递参数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Fortran 95/2003程序设计

Fortran 95/2003程序设计

中国电力出版社 / 2009-8 / 88.00元

Fortran是计算世界最早出现的高级程序设计语言之一,随着面向对象编程时代的到来,Fortran语言不仅保持了发展的步伐,而且继续在科学计算方面领先。《Fortran95/2003程序设计(第3版)》在第2~7章介绍了Fortan语言基础知识,为初学者提供入门学习资料;在第8~15章介绍了Fortran语言高级特性,为深入用好Fortran语言提供支持;在第16章讲述了Fortran语言面向对象......一起来看看 《Fortran 95/2003程序设计》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试