[英]How can I expose a value to the global actions to share it among components?
I am trying to expose a value in order to share it among components: 我试图公开一个值,以便在组件之间共享它:
I have this reducer: 我有这个减速器:
import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';
const initialState = {
currentService: 'otherservices',
};
export const handlers = {
[ActionTypes.SELECTED_SERVICE_ACTION](state, action) {
return {
...state,
currentService: action.payload,
};
},
};
export default createReducer(initialState, handlers);
And this action: 而这个动作:
import ActionTypes from '../constants/ActionTypes';
export const selectedServiceAction = service => ({
type: ActionTypes.SELECTED_SERVICE_ACTION,
payload: service,
});
export default selectedServiceAction;
And I have this component: 我有这个组成部分:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { DropdownV2 } from 'carbon-components-react';
import PropTypes from 'prop-types';
import TableMultiSelectItems from './TableMultiSelectItems';
import { selectedServiceAction } from '../actions/cancellations';
class TableMultiselect extends Component {
constructor(props) {
super(props);
this.state = {
itemState: 'otherservices',
};
}
onChange = e => this.setState({ itemState: e.selectedItem.id });
render() {
const { t } = this.props;
// Array of dropdown's items
const menuItems = TableMultiSelectItems(t);
return (
<div>
<DropdownV2
items={menuItems}
onChange={this.onChange}
/>
</div>
);
}
}
const wrappedComponent = connect(
() => ({
serviceSelected: this.state.itemState,
}),
dispatch => ({
serviceSelectedHandler: serviceSelected => {
dispatch(selectedServiceAction(serviceSelected));
},
}),
)(TableMultiselect);
TableMultiselect.propTypes = {
t: PropTypes.func.isRequired,
serviceSelectedHandler: PropTypes.func.isRequired,
};
export default translate()(wrappedComponent);
What I need from the component above is to take the value returned by the onChange
function ( itemState: e.selectedItem.id });
我从上面的组件中需要的是获取
onChange
函数返回的值( itemState: e.selectedItem.id });
) and expose it in order to grab it in another component and do something like this: )并公开它,以便将其抓取到另一个组件中并执行以下操作:
//other imports
import the-Action-To-Get-The-OnChange-Value from "..."
const Cancellations = () => (
<React.Fragment>
{the-Action-To-Get-The-OnChange-Value.id === 'thisID' ?
<SLRequests/> : <SLDevices/>
}
</React.Fragment>
);
This is the first component I am trying to do with Redux, so I need some help trying to achieve what I need. 这是我要与Redux一起使用的第一个组件,因此我需要一些帮助来实现所需的功能。
If you want something to be accessible globally, you will have to store it inside application state (redux store). 如果您希望全局访问某些内容,则必须将其存储在应用程序状态(redux存储)中。 In your particular case, you want to store
e.selectedItem.id
. 在您的特定情况下,您想存储
e.selectedItem.id
。 So besides setting the state (however this is redundant because the variable will be accessible globally). 因此,除了设置状态外(但是这是多余的,因为可以全局访问该变量)。
What you need to do? 你需要做什么? Inside
onChange
function you have to dispatch the action and pass the argument. 在
onChange
函数中,您必须调度操作并传递参数。
onChange = (e) => this.props.dispatch(selectedServiceAction(e.selectedItem.id));
Note : To access the dispatch
function your component has to be connected. 注意 :要访问
dispatch
功能,必须连接您的组件。
Then it will be catched by reducer and will be saved in store. 然后它将被减速器捕获并保存在商店中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.