react 组件之间通讯传值的多种方法实现

react组件传值,大概有下面几种方法:

  • props
  • context
  • redux
  • react-router 路由切换时通过url传值(少量非机密数据,其实也是props传)。

今天记录一下通过redux来传值的实现。

我们先写一个createAction的函数:

export function setAnalysisParams(params) {
  return {
    type: SET_ANALYSIS_PARAMS,
    result: params
  }
}

在reducer里面:

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SET_ANALYSIS_PARAMS:
      return {
        ...state,
        params: action.result
      };
    default:
      return state;
  }

当action触发reducer时,会把action的result传给reducer的params。写好这里,我们就可以在组件中传给adction params了。

@connect(
  () => ({
  }),
  {
    setAnalysisParams
  })

先把actionCreator拿出来。
在组件的某个需要的地方,可以直接向它传我们要放进redux里的数据:

this.props.setAnalysisParams({
        someModels
      });

这时,我们就可以在另外一个组件中取到刚刚放进去的数据。
另外一个组件:

@connect(
  state => ({
    example: state.clinic.params
  }),
  {}
)

把redux中的params数据映射到example上。
下面,就可以用了:

 const {someNames, ...} = this.props.example; //取出数据名

以上,就实现了redux来传值的方法。适合非父子组件且嵌套关系复杂的组件之间数据的传递。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而...
    苍都阅读 14,821评论 1 139
  • 今天来看一下react组件之间是怎么进行通讯的。react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上...
    亲亲qin阅读 6,023评论 2 12
  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 8,957评论 10 58
  • 前言 本文 有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论。 文中所有内...
    珍此良辰阅读 11,953评论 23 111
  • 我抬头仰望苍窘 只见 月也朦胧,夜也朦胧 我闭目思绪放空 忽觉 山也重重,水也重重 生活是永恒的寒冬 对我 露出鄙...
    一见如故_再见陌路阅读 260评论 0 0