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来传值的方法。适合非父子组件且嵌套关系复杂的组件之间数据的传递。