These are my classes and component:
App.js:
import { connect } from "react-redux";
import Main from "./components/main/Main";
import * as actions from "./redux/actions";
import { bindActionCreators } from "redux";
import { withRouter } from "react-router";
function mapStateToProps(state) {
console.log(state);
return {
// naming must be exact same as function in reducer
auth: state.auth,
errorBag: state.errorBag
};
}
function mapDispatchProps(dispatch) {
return bindActionCreators(actions, dispatch);
}
const App = withRouter(connect(mapStateToProps, mapDispatchProps)(Main));
export default App;
Main.js:
import React, { Component } from "react";
import { Redirect } from "react-router";
import { Route } from "react-router-dom";
import Login from "./../login/Login";
import Home from "./../home/Home";
class Main extends Component {
render() {
return (
<div>
<Route
path="/login"
render={param => {
return <Login {...this.props} {...param} />;
}}
/>
{!this.auth ? <Redirect to="/login" /> : <Home />}
</div>
);
}
}
export default Main;
reducer.js:
import { combineReducers } from "redux";
function authenticateReducer(state = null, action) {
switch (action.type) {
case "AUTHENTICATE": {
return action.token;
}
default: {
return state;
}
}
}
function errorBagReducer(state = [], action) {
switch (action.type) {
case "ADD_ERROR": {
console.log("called");
return { [action.area]: action.error };
}
default:
return state;
}
}
const rootReducer = combineReducers({ authenticateReducer, errorBagReducer });
export default rootReducer;
actions.js:
import axios from "axios";
export function startSignUp(signUpData) {
return dispatch => {
return axios
.post("http://localhost:8000/api/v1/user/sign-up/", signUpData)
.then(res => {
console.log(res);
authenticate(res.data.shaba);
})
.catch(error => {
console.log(error.data);
});
};
}
export function addErrorIntoBag(area, error) {
return {
type: "ADD_ERROR",
area,
error
};
}
function authenticate(token) {
return {
type: "AUTHENTICATE",
token
};
}
Login.js:
import React, { Component } from "react";
import "./login.css";
import InlineAlert from "./../alerts/InlineAlert";
class Login extends Component {
constructor(props) {
super(props);
}
getAreaName = () => "LOGIN";
submitHandler = event => {
event.preventDefault();
const email = event.target.elements.email.value;
const code = event.target.elements.code.value;
const password = event.target.elements.password.value;
if (password === "" || code === "" || email === "") {
this.props.addErrorIntoBag(this.getAreaName(), "fill the form please");
return;
}
const data = {
email: email,
password: password,
national_code: code
};
this.props.startSignUp(data);
this.forceUpdate();
};
render() {
return (
<div id="parent" onSubmit={this.submitHandler}>
<form id="form_login">
<h2>Login</h2>
<br />
<div className="form-group">
<label forhtml="exampleInputEmail1">National code</label>
<input
key="code"
type="text"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="code"
></input>
</div>
<div className="form-group">
<label forhtml="exampleInputPassword1">Email</label>
<input
type="email"
className="form-control"
id="email"
name="email"
key="email"
></input>
</div>
<div className="form-group">
<label forhtml="exampleInputPassword1">Password</label>
<input
type="password"
className="form-control"
id="name"
name="password"
key="password"
></input>
</div>
<div className="form-group form-check"></div>
<button type="submit" className="btn btn-light">
SIGN-UP
</button>
</form>
{/* drill down checking 𤯠*/}
{this.props.errorBag && this.props.errorBag[this.getAreaName()] && (
<InlineAlert error={this.props.errorBag[this.getAreaName()]} />
)}
</div>
);
}
}
export default Login;
When I call submitHandler in Login.js and form is empty it calls an action to changes the redux store and Login.js component must update and InlieAlert component must appear in the screen, but anything doesn't change!
Is it because of my Main.js that is middle of Login and Redux?
I'm confused!
I guess you forgot to call dispatch in startSignUp function. It is not enough just to return from authenticate the object as you did with { type: "AUTHENTICATE", token } but you need to pass to dispatch also. In this way you are triggering a state change.
From the documentation of dispatch(action):
Dispatches an action. This is the only way to trigger a state change.
Maybe you could try to do somehow the following:
export function startSignUp(signUpData) {
return dispatch => {
return axios
.post("http://localhost:8000/api/v1/user/sign-up/", signUpData)
.then(res => {
console.log(res);
// missing dispatch added
dispatch(authenticate(res.data.shaba));
})
.catch(error => {
console.log(error.data);
});
};
}
So you can think of like calling as the following at the end for the state change:
dispatch({
type: "AUTHENTICATE",
token
});
I hope this helps!
Related
tl;dr: In the LoginForm, this.props is undefined despite my passing in actions in mapDispatchToProps.
I've set breakpoints in the connect function, and the action is making it into the connect function, but for whatever reason, in the handleSubmit function, this.props is undefined.
I'm stumped.
I have a separate 'SignUp' flow that's basically identical to what I have below, and it works perfectly.
I essentially copy pasted the sign up code, and renamed everything "login", and modified things slightly and for whatever reason this.props is undefined, even though what I'm passing into mapDispatchToProps seems to be correct.
The component:
import React from 'react';
import { connect } from 'react-redux';
import { loginSubmit, loginUpdateField } from '../../redux/actions/login.actions';
import { TextInput } from '../../stories/TextInput';
import { Button } from '../../stories/Button';
export class LoginForm extends React.Component {
// eslint-disable-next-line
constructor(props) {
super(props);
}
handleSubmit(event) {
event.preventDefault();
console.log('Props: ', this.props); // UNDEFINED!!!!!!
}
handleUpdateField(field, value) {
// this.props.updateField(field, value);
}
render() {
return (
<form style={{ 'WebkitPerspective': '1000' }}>
<TextInput label="Username" id="username" /> <br />
<TextInput label="Password" id="password" type="password" /> <br /><br />
<Button disabled={false} primary size="medium" onClick={this.handleSubmit.bind(this)} label="Ready for Takeoff" />
<Button disabled={false} size="medium" onClick={() => alert} label="Cancel" />
</form>
);
}
}
export default connect(
null,
{ loginSubmit, loginUpdateField }
)(LoginForm);
The action:
export const loginSubmit = (fieldValues) => {
return dispatch => {
dispatch(loginSubmitBegin);
let errors = isFormValid(fieldValues);
if (!errors.formValid) {
dispatch(loginErrors(errors));
} else {
axios
.post(`https://api.mydomain.io/login`, fieldValues, { headers: { "Access-Control-Allow-Origin": "*", } })
.then(res => {
dispatch(loginSuccess({ username: 'testuser' }));
})
.catch(err => {
handleErr(err.response.data.error);
});
}
}
};
The reducers:
const initialState = {
loginStatus: 'not_started',
fieldValues: {
username: '',
password: '',
},
errors: {
formValid: false,
username: [],
password: [],
}
};
export default function (state = initialState, action) {
switch (action.type) {
case 'LOGIN_UPDATE_FIELD':
let newState = {
...state,
};
newState.fieldValues[action.payload.fieldName] = action.payload.fieldValue;
return newState;
case 'LOGIN_SUBMIT_BEGIN':
return {
...state,
signupStatus: 'pending'
};
case 'LOGIN_ERRORS':
return {
...state,
signupStatus: 'errors',
errors: action.payload
};
case 'LOGIN_SUCCESS':
return {
...state,
signupStatus: 'success'
};
default:
return state;
}
}
Combined Reducer:
import { combineReducers } from 'redux';
import signup from './signup.reducers';
import user from './user.reducers';
import login from './login.reducers';
export default combineReducers({ login, user, signup});
LoginPage.js
import React from 'react';
import PropTypes from 'prop-types';
import { LoginForm } from '../features/LoginForm';
import './signup.css';
export const LoginPage = () => {
return (
<article>
<section>
<h2>Login!!</h2> <br /> <br />
<LoginForm />
</section>
</article>
);
};
LoginPage.propTypes = {
user: PropTypes.shape({})
};
LoginPage.defaultProps = {
user: null,
};
If you import the named export from this component, then you're importing the unconnected component:
import { LoginForm } from "./LoginForm";
Since the redux-connected component is the default export, you have to make sure to import the default export if you want it to be the redux-connected version.
import LoginForm from "./LoginForm";
One way to avoid this mistake in the future is to not even export the unconnected LoginForm component. In other words, you can just declare the class as class LoginForm extends React.Component { ... } rather than export class LoginForm extends React.Component { ... }.
I have written React code to:
Authenticate user - enters username & password
A request is sent to an auth server and a token is received and stored in the Local Storage
On successfully storing the token, an action is dispatched to change the store state from isLoggedin: false to isLoggedIn:true
On changing the state to true, it redirects me to a new component.
Using jest I am trying to test only the behavior of the same functionality
I am using Moxios to mock the Axios request.
How do I test using Jest to understand that a new component has been rendered?
Below is my code:
// eslint-disable-next-line
import React, { Component } from 'react';
import './Form.css';
import { Redirect } from 'react-router-dom';
import { store } from '../../store';
import { LOGIN } from '../../constants/actionTypes';
import { connect } from 'react-redux';
import Spiiner from '../Spiiner';
import { showLoader } from '../../actions';
import { hideLoader } from '../../actions';
import axios from 'axios';
interface IProps {
login: any;
dispatch: any;
}
interface IState {
username: string;
password: string;
}
export class Login extends Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
username: '',
password: '',
};
}
componentDidMount() {
this.storeCollector();
}
storeCollector() {
let localStore = localStorage.getItem('login');
if (localStore) {
store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } });
}
}
handleUsernameChange = (event: any) => {
this.setState({
username: event.target.value,
});
};
handlePassword = (event: any) => {
this.setState({
password: event.target.value,
});
};
login() {
// this.props.dispatch(showLoader());
axios
.post('https://reqres.in/api/login', {
email: this.state.username,
password: this.state.password,
})
.then(
(response) => {
console.log(response.data);
// this.props.dispatch(hideLoader());
if (response.status===200) {
localStorage.setItem(
'login',
JSON.stringify({ token: response.data })
);
store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } });
} else {
store.dispatch({ type: LOGIN, payload: { isLoggedIn: false } });
}
},
(error) => {
console.log(error);
// this.props.dispatch(hideLoader());
}
);
}
render() {
let loginPage = (
<div className="form">
<form className="form-signin">
<div className="text-center mb-4">
<h1>Login</h1>
<img
className="mb-4"
src="/docs/4.5/assets/brand/bootstrap-solid.svg"
alt=""
width="72"
height="72"
></img>
</div>
<div className="form-label-group">
<input
type="email"
id="inputEmail"
className="form-control"
placeholder="Email address"
value={this.state.username}
onChange={this.handleUsernameChange}
/>{' '}
<br></br>
</div>
<div className="form-label-group">
<input
type="password"
id="inputPassword"
className="form-control"
placeholder="Password"
value={this.state.password}
onChange={this.handlePassword}
/>
</div>
<button
className="btn btn-lg btn-dark"
type="button"
onClick={() => {
this.login();
}}
>
Sign in
</button>
</form>
<a href="">
<img
id="img"
src=""
alt=""
/>
</a>
<Spiiner />
</div>
);
return (
<div>
{!this.props.login ? <div>{loginPage}</div> : <Redirect to="/search" />}
</div>
);
}
}
interface RootState {
login: any;
}
const mapStateToProps = (state: RootState) => {
console.log(state.login.isLoggedIn);
return {
login: state.login.isLoggedIn,
};
};
export default connect(mapStateToProps)(Login);
And my test file is:
import { mount } from 'enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Login } from './Components/Form/Login';
import React from 'react';
import renderer from 'react-test-renderer';
import { store } from './store/index';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { makeMockStore } from '../MockUtil/utils';
import moxios from 'moxios';
import { MemoryRouter } from 'react-router-dom'
configure({ adapter: new Adapter() });
const setUp = (props = {}) => {
const component = mount(
<Provider store={store}>
<Router>
<Login />
</Router>
</Provider>
);
return component;
};
it('render correctly text component', () => {
const LoginComponent = renderer
.create(
<Provider store={store}>
<Login />
</Provider>
)
.toJSON();
expect(LoginComponent).toMatchSnapshot();
});
let wrapper: any;
describe('Login Page test', () => {
let component;
beforeEach(() => {
wrapper = setUp();
});
// it('Shows spinner on Button click', () => {
// console.log(wrapper.html());
// wrapper.find('button').simulate('click');
// expect(wrapper.contains(<div className="spinner-grow" />)).toEqual(true);
// console.log(wrapper.html());
// });
it('check for existence of form', () => {
const form = wrapper.find('form');
expect(form.length).toBe(1);
});
});
describe('Moxios', () => {
beforeEach(() => {
moxios.install();
wrapper = setUp();
});
afterEach(() => {
moxios.uninstall();
});
it('Calls the login class method on click', () => {
const spyPreventDefault = jest.spyOn(Login.prototype, 'login');
wrapper.find('button').simulate('click');
expect(spyPreventDefault).toHaveBeenCalledTimes(1);
});
global.window = { location: { pathname: null } };
it('specify response for a specific request', function (done) {
console.log(wrapper.html());
wrapper.find('button').simulate('click');
moxios.wait(function () {
let request = moxios.requests.mostRecent();
request
.respondWith({
status: 200,
response: {
token: '8972fjh45kbwbrhg4hj5g',
},
})
.then(function () {
done();
});
});
});
});
I want to test for the re-direction and rendering of the new component.
Please guide me.
P.S: This is the first time I am dealing with testing.
Simply pass the login prop to your Login component:
const component = mount(
<Provider store={store}>
<Router>
<Login login={true} />
</Router>
</Provider>
);
and expect that the href has changed accordingly:
expect(window.location.href).toContain('search');
Alternatively, you can change Redirect to history.push (read about the difference somewhere).
a) if you have a history prop
componentWillReceiveProps(nextProps) {
if(nextProps.login)
this.props.history.push('/search');
}
}
b) if you don't have a history prop
import {useHistory} from 'react-router-dom';
...
const history = useHistory();
componentWillReceiveProps(nextProps) {
if(nextProps.login)
history.push('/search');
}
}
I have written below code,
1.I want to use Connect for storing usernamein local storage
2.I am using HOC component for logging purpose (callInfoLogger and callErrorLogger)
3.If I use connect and HOC together then this.props.history.push is not working (Its not redirecting to MyDashboard page)
Could you please let me know what do I need to do to fix the code?
App.js
import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path="/login" component={Login} />
<Route path="/dashboard" component={MyDashboard} />
</Switch>
</Router>
)
}
}
export default App;
Login.js
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import HighLevelComponent from './HighLevelComponent';
class Login extends Component {
state = {
username: '',
password: '',
loginsuccess: true
}
callOnSubmit = (e) => {
e.preventDefault();
this.props.callErrorLogger("Inside call on Submit");
if (this.state.loginsuccess === true) {
this.props.callInfoLogger("Calling Info logger ");
this.props.onLoginSuccess(this.state.username);
this.props.history.push('/dashboard');
}
};
render() {
return (
<body>
<form className="login-form" onSubmit={this.callOnSubmit}>
<input
type="text" onChange={e => {
this.setState({
...this.state,
username: e.target.value
})
}}
/>
<input type="password"
onChange={e => {
this.setState({
...this.state,
password: e.target.value
})
}}
/>
<input type="submit" className="btnSbumit" value="LOG IN" />
</form>
</body>
)
}
}
const mapDispatchToProps = dispatch => {
return {
onLoginSuccess: (username) => dispatch({ type: "LOGIN_SUCCESS", username: username })
}
}
export default withRouter(HighLevelComponent(connect(null, mapDispatchToProps)(Login)));
MyDashboard.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class MyDashboard extends Component {
render() {
return (
<body>
<h1>Welcome to React.. {this.props.username}</h1>
</body>
)
}
}
const mapStateToProps = state => {
return {
username: state.username
}
}
export default connect(mapStateToProps, null)(MyDashboard);
HighLevelComponent.js
import React from 'react';
const HighLevelComponent = (WrapperComponent) => {
class NewComponent extends React.Component {
callInfoLogger = (infomsg) => {
console.info(infomsg);
}
callErrorLogger = (errmsg) => {
console.error(errmsg);
}
render() {
return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} />
}
}
return NewComponent;
}
export default HighLevelComponent;
In the HOC names HighLevelComponent pass the props to the wrapper component as follows:
const HighLevelComponent = (WrapperComponent) => {
class NewComponent extends React.Component {
callInfoLogger = (infomsg) => {
console.info(infomsg);
}
callErrorLogger = (errmsg) => {
console.error(errmsg);
}
render() {
return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} {...props} />
}
}
return NewComponent;
}
Please note the {...props} on the wrapper component. In this way all the props will be further passed.
I am new to react and I can't debug why mapStateToProps is not running. Pls see the last function in login.js.
I have added alert statements in my mapStateToProps function but its just not running. Dont know where to look for problems.
store.js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';
export const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
index.js:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './helpers';
import { App } from './App';
import { configureFakeAPI } from './helpers';
configureFakeAPI();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
App.js
import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { PrivateRoute } from './PrivateRoute.js';
import { history } from './helpers';
import { alertActions } from './actions';
import { HomePage } from './components/HomePage';
import LoginPage from './components/LoginPage';
import { RegisterPage } from './components/RegisterPage';
export class App extends React.Component {
constructor(props) {
super(props);
const { dispatch } = this.props;
history.listen((location, action) => {
});
}
render() {
const { alert } = this.props;
return (
<div className="container">
<div className="col-sm-8 col-sm-offset-2">
<LoginPage />
</div>
</div>
);
}
}
function mapStateToProps(state) {
const { alert } = state;
return {
alert
};
}
export default connect(mapStateToProps)(App);
LoginPage.js
import React from 'react';
import {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {userActions} from '../actions';
import {userConstants} from "../constants";
class LoginPage extends Component {
constructor(props) {
super(props);
// reset login status
this.state = {
username: '',
password: '',
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (e) => {
let formControlName = e.target.name;
let value = e.target.value;
this.setState({
[formControlName]: value
});
};
handleSubmit = (e) => {
e.preventDefault();
this.sendTheAlert();
}
render() {
const {username, password, submitted} = this.state;
return (
<div className="col-md-6 col-md-offset-3">
<i>{JSON.stringify(this.state)}</i>
<h2>Login</h2>
<form name="form" onSubmit={this.handleSubmit}>
<div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
<label htmlFor="username">Username</label>
<input type="text" className="form-control username" name="username"
onChange={this.handleChange}/>
{submitted && !username &&
<div className="help-block">Username is required</div>
}
</div>
<div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
<label htmlFor="password">Password</label>
<input type="password" className="form-control" name="password" onChange={this.handleChange}/>
{submitted && !password &&
<div className="help-block">Password is required</div>
}
</div>
<div className="form-group">
<button className="btn btn-primary">Login</button>
<a className="btn btn-link">Register</a>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state) {
// const { todos } = state;
// return { todoList: todos.allIds };
return {};
}
// function mapDispatchToProps(dispatch) {
// alert();
// return ({
// sendTheAlert: () => {
// dispatch(userConstants.LOGIN_REQUEST)
// }
// })
// }
const mapDispatchToProps = (dispatch) => ({ <====== NOT RUNNING
sendTheAlert(coin) {
debugger;
alert();
dispatch(userConstants.LOGIN_REQUEST) }
})
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
I assume that it is mapDispatchToProps that isnt working, right?
Try this
...
const mapDispatchToProps = (dispatch) => (
return {
sendTheAlert(coin) {
debugger;
alert();
return dispatch(userConstants.LOGIN_REQUEST) }
})
A sample of how to structure mapDispatchToProps would be (from https://react-redux.js.org/using-react-redux/connect-mapdispatch). Be mindful of the return statement.
const mapDispatchToProps = dispatch => {
return {
// dispatching plain actions
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
reset: () => dispatch({ type: 'RESET' })
}
}
Everything is fine I was just calling this.sendTheAlert() wrong. it should be this.props.sendTheAlert()
I want to create a simple form that takes in an email adress and later adds it to our database. I went with React Forms, because it facilitates the whole development process and reduces the amount of time.
However, when I'm trying to POST my form I'm getting this error: Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
Here's my AddUserForm.js:
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const AddUserForm = ({ handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<div>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Bjud in</button>
</form>
)
}
export default reduxForm({
form: 'addUser'
})(AddUserForm)
Here's my addUserAction:
import axios from 'axios'
import settings from '../settings'
axios.defaults.baseURL = settings.hostname
export const addUser = email => {
return dispatch => {
return axios.post('/invite', { email: email }).then(response => {
console.log(response)
})
}
}
And here's my AddUserContainer.js:
import React, { Component } from 'react'
import { addUser } from '../../actions/addUserAction'
import AddUserForm from './Views/AddUserForm'
import { connect } from 'react-redux'
class AddUserContainer extends Component {
submit(values) {
console.log(values)
this.props.addUser(values)
}
render() {
return (
<div>
<h1>Bjud in användare</h1>
<AddUserForm onSubmit={this.submit.bind(this)} />
</div>
)
}
}
function mapStateToProps(state) {
return { user: state.user }
}
export default connect(mapStateToProps, { addUser })(AddUserContainer)
I am really grateful for all the answers! Stay awesome!
In your AddUserForm.js
Here you have to add onSubmitHandler as a prop for taking in the submit function that's suppose to run on form submit. You then have to pass the onSubmitHandler to handleSubmit()
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const AddUserForm = ({ handleSubmit, onSubmitHandler }) => {
return (
<form onSubmit={handleSubmit(onSubmitHandler)}>
<div>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Bjud in</button>
</form>
)
}
export default reduxForm({
form: 'addUser'
})(AddUserForm)
In your AddUserContainer.js
Change onSubmit={this.submit.bind(this)} to onSubmitHandler={this.submit.bind(this)}
Not 100% this is your problem but I would recommend against trying to bind on the form or whatever. Assuming you're storing the input in the state's user object, then you just want to define a submit method, and call it with this.state.user. That method should basically just call your api method.
import React, { Component } from 'react'
import { addUser } from '../../actions/addUserAction'
import AddUserForm from './Views/AddUserForm'
import { connect } from 'react-redux'
class AddUserContainer extends Component {
submit(values) {
console.log(values)
this.props.addUser(values)
}
render() {
return (
<div>
<h1>Bjud in användare</h1>
<AddUserForm onSubmit={this.submit(this.state.user)} />
</div>
)
}
}
function mapStateToProps(state) {
return { user: state.user }
}
export default connect(mapStateToProps, { addUser })(AddUserContainer)