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 세트 (같은 상태에서 작업을 수행하는 국가의 모든 유형을 변화. 모든 동작에는 유형이 있으며 유형은 감속기의 어느 부분이 실행되는지 결정합니다.
actions.js :
import types from './types';
const toggleState = {
type: types.TOGGLE_STATE
};
export default {
updateMenuState
}
operations.js :
import actions from './actions';
const toggleState = actions.toggleState;
export default {
updateMenuState
};
귀하의 예제에서 그래서
, 나는 다음과 같은 파일을 상태/inlineMenu 폴더를 만들고 그 안에 것
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;
selectors.js :
const isMenuOpen = state => state.inlineMenu.isOpen;
export default {
isMenuOpen
};
types.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 'connect 함수를 사용해야합니다.이 함수는 작업과 선택자를 가져 와서 기본 반응 소품에 매핑합니다.
그래서 연결된 구성 요소는 다음과 같이 수 :
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'));
이 오늘 저녁을 다할 것입니다. –