Не получается к этому делу приделать redux.
Вот код контейнера:
let name;
let description;
const customStyles = {
content : {
...
}
};
let LeftMenu = ({modalIsOpen, firstButtonClick, close}) => {
return (
<div>
<nav >
<ul className='LMenu'>
<MenuButton text = {FIRST_BUTTON} onClick = {() => firstButtonClick(<Modal/>)}/>
...
</ul>
</nav>
<Modal
isOpen={modalIsOpen}
onRequestClose={close}
style={customStyles}
>
<h2 ref='subtitle'>Hello</h2>
<button onClick={close}>close</button>
<div>I am a modal</div>
<form onSubmit={e => {
e.preventDefault();
createFamily(name.value, description.value)
}}>
<ul>
<li><input placeholder='Введите название семьи'
ref={node1 => {name = node1}}/></li>
<li><input placeholder='Введите описание семьи'
ref={node2 => {description = node2}}/></li>
<button type='submit'>Создать</button>
</ul>
</form>
</Modal>
</div>
);
};
LeftMenu.propTypes = {
modalIsOpen: PropTypes.bool.isRequired,
firstButtonClick: PropTypes.func.isRequired,
close: PropTypes.func.isRequired
};
const mapDispatchToProps = (dispatch) => {
return {
firstButtonClick: () => dispatch(createFamilyModal()),
close: () => dispatch(closeFamilyModal())
}
};
const mapStateToProps = (state) => {
return {
modalIsOpen: state.modalIsOpen
}
};
LeftMenu = connect(
mapStateToProps,
mapDispatchToProps
)(LeftMenu);
export default LeftMenu
действия:
export function createFamilyModal() {
return {
type: CREATE_FAMILY_MODAL
}
}
export function closeFamilyModal() {
return {
type: CLOSE_FAMILY_MODAL
}
}
export function createFamily(familyName, description) {
return {
type: CREATE_FAMILY,
familyName,
description
}
}
и редьюсеры:
\\ updateModel reducer
const updateModal = (state = false, action) => {
switch (action.type) {
case CREATE_FAMILY_MODAL:
return true;
case CLOSE_FAMILY_MODAL:
return false;
default:
return state;
}
};
\\ family reducer
let initialState = {
isEmpty: true,
familyName: '',
description: '',
persons: [],
isFetching: false
};
const family = (state = initialState, action) => {
switch(action.type) {
case CREATE_FAMILY:
return Object.assign({}, state, {
isEmpty: false,
familyName: action.familyName,
description: action.description
});
default:
return state;
}
};
\\ index reducer
const FamilyTreeApp = combineReducers({
family: family,
modalIsOpen: updateModal
});
1)После нажатия на кнопку меню, состояние меняется правильно и появляется модальное окно, фон затемняется, но в консоле выскакивает ошибка
invariant.js?568c:39 Uncaught Invariant Violation: Stateless function components cannot have refs.
2)После нажатия на кнопку close, состояние меняется правильно, фон становится обычным, но окно не пропадает. В консоле ошибка:
ReactOwner.js?40e0:84 Uncaught TypeError: Cannot read property 'refs' of null
3) при вводе данных в инпут, происходит тоже что и на этапе 2
4) при нажатии на кнопку создать, страница перезагружается
