我有一个使用 react 状态的工作内联对话框。工作代码如下。
import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';
import Button from '@atlaskit/button';
import InlineDialog from '@atlaskit/inline-dialog';
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
class ButtonActivatedDialog extends PureComponent {
static propTypes = {
content: PropTypes.node,
position: PropTypes.string,
}
state = {
isOpen: false,
};
handleClick = () => {
this.setState({
isOpen: !this.state.isOpen,
});
}
handleOnClose = (data) => {
this.setState({
isOpen: data.isOpen,
});
}
render() {
return (
<InlineDialog
content={this.props.content}
position={this.props.position}
isOpen={this.state.isOpen}
onClose={this.handleOnClose}
>
<Button
onClick={this.handleClick}
isSelected
>
The Button
</Button>
</InlineDialog>
);
}
}
const App = () => (
<ButtonActivatedDialog
content={
<div>
<h5>
Displaying...
</h5>
<p>
Here is the information I need to display.
</p>
</div>}
position='bottom right'
/>
);
render(<App />, document.getElementById('root'));
我希望按钮具有相同的行为,但使用 redux 来维护对话框的状态。
在阅读了一些 Material 后,我相信我需要发送一个操作来激活一个 reducer 女巫,从而帮助我更新对话框的状态。但是,我不认为我完全理解应该如何将其组合在一起。
这是我正在进行的工作,但由于某种原因,我的 codeSanbox 不喜欢我创建商店的格式。
mport React, { PureComponent } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';
import Button from '@atlaskit/button';
import InlineDialog from '@atlaskit/inline-dialog';
import { connect, createStore } from 'react-redux'
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
const mapStateToProps = state => {
return {
isDialogOpen: false,
}
}
const mapDispatchToProps = dispatch => {
return {
toggleDialog: () => dispatch({
type: 'TOGGLE_DIALOG'
})
}
}
// action:
const tottleDialog = 'TOGGLE_DIALOG';
//action creator
const toggleDialog = (e) => ({
type: 'TOGGLE_DIALOG',
e,
})
class ButtonActivatedDialog extends PureComponent {
static propTypes = {
content: PropTypes.node,
position: PropTypes.string,
}
state = {
isOpen: false,
};
handleClick = () => {
this.setState({
isOpen: !this.state.isOpen,
});
}
handleOnClose = (data) => {
this.setState({
isOpen: data.isOpen,
});
}
render() {
return (
<InlineDialog
content={this.props.content}
position={this.props.position}
isOpen={this.state.isOpen}
onClose={this.handleOnClose}
>
<Button
onClick={this.handleClick}
isSelected
>
The Button
</Button>
</InlineDialog>
);
}
}
const App = () => (
<ButtonActivatedDialog
content={
<div>
<h5>
Displaying...
</h5>
<p>
Info here
</p>
</div>}
position='bottom right'
/>
);
const store = createStore(toggleDialog, {})
//need and action
//need an action creator - a function that returns an action:
//
// render(<App />, document.getElementById('root'));
render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root')
);
最佳答案
好的,首先你必须设置你的 redux 状态。我们通常根据此处的重新鸭子模式执行此操作:https://github.com/alexnm/re-ducks
这意味着您将为应用程序的每个“部分”创建一个目录。每个部分都有一个:
- 操作:在状态上执行任务(例如打开或关闭内嵌菜单)
- 选择器:获取状态的某些值(例如内联菜单是否打开?)
- 操作:对状态执行操作(例如将 isOpen 设置为 true/false)
- Reducer:将操作应用于状态(如上面的操作)
- 类型:任何类型的状态更改。任何action都有一个类型,类型决定reducer中的哪一部分被执行。
因此,在您的示例中,我将创建一个 state/inlineMenu 文件夹,并在其中包含以下文件:
actions.js:
import types from './types';
const toggleState = {
type: types.TOGGLE_STATE
};
export default {
updateMenuState
}
操作.js:
import actions from './actions';
const toggleState = actions.toggleState;
export default {
updateMenuState
};
reducers.js:
import types from './types';
const initialState = {
isOpen: false // closed per default
};
const inlineMenuReducer = (state = initialState, action) => {
switch (action.type) {
case types.TOGGLE_STATE:
return { ...state, isOpen: !state.isOpen }
default:
return state;
}
};
export default inlineMenuReducer;
选择器.js:
const isMenuOpen = state => state.inlineMenu.isOpen;
export default {
isMenuOpen
};
类型.js:
const TOGGLE_STATE = 'inlineMenu/TOGGLE_STATE';
export default {
TOGGLE_STATE
};
index.js:
import reducer from './reducers';
export { default as inlineMenuSelectors } from './selectors';
export { default as inlineMenuOperations } from './operations';
export default reducer;
您还必须设置默认提供程序。您可能应该调整选择器中 isOpen 属性的路径。
现在您已经设置了全局 redux 状态。
我们现在需要将其中的数据获取到 View 中。为此,我们需要使用 redux 的 connect 函数,其中它将获取操作和选择器并将它们映射到默认的 React props。
因此您的连接组件可能如下所示:
import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Button from '@myKitkit/button';
import InlineDialog from '@mykit/inline-dialog';
import { inlineMenuOperations, inlineMenuOperations } from '../path/to/state/inlineMenu';
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
class ButtonActivatedDialog extends PureComponent {
static propTypes = {
content: PropTypes.node,
position: PropTypes.string,
toggleState: PropTypes.func.isRequired
}
handleClick = () => {
const { toggleState } = this.props;
// This will dispatch the TOGGLE_STATE action
toggleState();
}
handleOnClose = () => {
const { toggleState } = this.props;
// This will dispatch the TOGGLE_STATE action
toggleState();
}
render() {
return (
<InlineDialog
content={this.props.content}
position={this.props.position}
isOpen={this.props.isOpen}
onClose={this.handleOnClose}
>
<Button
onClick={this.handleClick}
isSelected
>
The Button
</Button>
</InlineDialog>
);
}
}
// You need to add the provider here, this is described in the redux documentation.
const App = () => (
<ButtonActivatedDialog
content={
<div>
<h5>
Displaying...
</h5>
<p>
Here is the information I need to display.
</p>
</div>}
position='bottom right'
/>
);
const mapStateToProps = state => ({
isOpen: inlineMenuSelectors.isOpen(state);
});
const mapDispatchToProps = dispatch => ({
toggleState: () => dispatch(inlineMenuOperations.toggleState())
}
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps);
render(<ConnectedApp />, document.getElementById('root'));
关于javascript - 如何在 React Redux 应用程序中打开和关闭内联对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47507764/