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