Back

reactnative - 20 redux 中传递parameter， click中传递参数

发布时间: 2019-01-07 09:31:00

注意：具体代码在 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 作为参数传到这个方法中。

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))
    }
  }
}

Back