Как сделать модальное окно в react & redux?

Question

[cfif11]

Хочу по нажатии кнопки сделать модальное окно, с формой для добавления нового объекта. Как этого добиться на основе react и redux?

Answer 1

[Захар Орлов]

https://react.parts/web?search=modal

Answer 2

[cfif11]

Не получается к этому делу приделать 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) при нажатии на кнопку создать, страница перезагружается

Comments

[Захар Орлов]

Ваш компонент LeftMenu - stateless function, у которой не может быть state, refs и lifecycle methods. Сделайте его классом.

class LeftMenu extends Component {}

[cfif11]

Захар Орлов: с горем пополам, получилось! Спасибо большое. А не подскажите, где можно получше вникнуть во всё это со stateless и не stateless. А то на оф сайте не совсем понимаю "фишку"?

[Захар Орлов]

Здесь наверное написано все что нужно знать про stateless functions https://facebook.github.io/react/docs/reusable-com...

Ну а вообще, если ваш компонент только рендерит разметку, то используйте stateless functions:
const component = (props) => < h1 >Hello, {props.name}< / h1>

во всех других случаях, например когда нужен state, refs, или методы жизненного цикла - используйте классы.

[cfif11]

Захар Орлов: Спасибо.