Given is an AuthenticationReducer:
import * as authenticationActions from "./AuthenticationAction";
//import * as managementActions from "./ManagementAction";
const initialState = {
user: null,
loginPending: false,
showLoginDialog: false,
showCreateUserDialog: false,
showUpdateUserDialog: false
};
function authenticationReducer(state = {}, action) {
console.log("Bin im Reducer" + action.type);
switch (action.type) {
case authenticationActions.SHOW_LOGIN_DIALOG:
return {
...state,
showLoginDialog: true,
error: null,
};
case authenticationActions.HIDE_LOGIN_DIALOG:
return {
...state,
showLoginDialog: false,
error: null,
};
default:
return state;
}
}
export default authenticationReducer;
The reducer works independently, but if I use combineReducer
I cannot use the login-Dialog
in UserSessionWidget any longer.
index.js
import thunk from 'redux-thunk'
import App from './App';
import reportWebVitals from './reportWebVitals';
import authenticationReducer from './redux/authentication/AuthenticationReducer'
import { combineReducers } from 'redux';
const initialState = {}
const middleware=[thunk]
const reducer = combineReducers({
authenticationReducer: authenticationReducer
})
const store = createStore(reducer,initialState,applyMiddleware(...middleware))
UserSessionWidget
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import Form from "react-bootstrap/Form";
import * as authenticationActions from "../actions/AuthenticationAction";
const mapStateToProps = (state) => {
return state;
};
class UserSessionWidget extends Component {
constructor(props) {
super(props);
this.state = { userID: "", password: "" };
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleShow(e) {
e.preventDefault();
/* this.setState({show: true}) */
const { showLoginDialogAction } = this.props;
showLoginDialogAction();
}
handleClose(e) {
e.preventDefault();
this.setState({ show: false });
const { hideLoginDialogAction } = this.props;
hideLoginDialogAction();
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
console.log(JSON.stringify(this.state));
}
handleSubmit(e) {
e.preventDefault();
const { userID, password } = this.state;
const { authenticateUserAction } = this.props;
authenticateUserAction(userID, password);
console.log("Pushed submit");
}
render() {
var showDialog = this.props.showLoginDialog;
if (showDialog == undefined) {
showDialog = false;
}
return (
<div>
<Button variant="primary" onClick={this.handleShow}>
Login
</Button>
<Modal show={showDialog} onHide={this.handleClose}>
<Modal.Body>
<Form>
<Form.Label>userID</Form.Label>
<Form.Control
id="LoginUserIDInput"
type="text"
placeholder="User ID"
name="userID"
onChange={this.handleChange}
/>
<br />
<Form.Label>password</Form.Label>
<Form.Control
id="LoginPasswordInput"
type="password"
placeholder="Password"
name="password"
onChange={this.handleChange}
/>
<Button
variant="primary"
type="submit"
onClick={this.handleSubmit}
>
Submit
</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
const mapDisaptchToProps = (dispatch) =>
bindActionCreators(
{
showLoginDialogAction: authenticationActions.getShowLoginDialogAction,
hideLoginDialogAction: authenticationActions.getHideLoginDialogAction,
authenticateUserAction: authenticationActions.authenticateUser,
},
dispatch
);
const ConnectedUserSessionsWidget = connect(
mapStateToProps,
mapDisaptchToProps
)(UserSessionWidget);
export default ConnectedUserSessionsWidget;
My App.js starts like this:
const mapStateToProps =state => {
return state
}
question: It can be conjectured that the state in mapsStateToProps
is not transferred. How should I change the mapStateToProps
to use UserSessionWidget properly ? Or is the error anywhere else ?