React redux thunk return dispatch not called - reactjs

I am developing a web application which I would like to use react redux. but my app is not dispatching. If I want to careate a new project and send request to action to dispatch it does not dispatch.
class CreateProject extends Component {
state = {
title: '',
content: ''
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
// console.log(this.state);
this.props.createProject(this.state);
}
render() {
return (
<div className="container">
<form className="white" onSubmit={this.handleSubmit}>
<h5 className="grey-text text-darken-3">Create a New Project</h5>
<div className="input-field">
<input type="text" id='title' onChange={this.handleChange} />
<label htmlFor="title">Project Title</label>
</div>
<div className="input-field">
<textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
<label htmlFor="content">Project Content</label>
</div>
<div className="input-field">
<button className="btn pink lighten-1">Create</button>
</div>
</form>
</div>
)
}
Projectreducer.js
const projectReducer = (state = initState, action) => {
switch (action.type) {
case 'CREATE_PROJECT':
console.log('create project', action.project);
return state;
case 'CREATE_PROJECT_ERROR':
console.log('çreate project error', action.err);
return state;
default:
return state;
}
};
export default projectReducer;
I have consoled on the function on project action is show the item on the console.
When I try consule of the return statement nothing happens
projectAction.js
export const createProject = (project) => {
return { type: 'CREATE_PROJECT', project }
return (dispatch, getState, {getFirebase, getFirestore}) => {
make async call to database
const firestore = getFirestore();
console.log(firestore);
firestore.collection('projects').add({
...project,
authFirstName: ' nm',
authorLastName: 'kjbbggh',
authorId: 12345,
createdAt: new Date()
}).then(()=>{
dispatch({ type: 'CREATE_PROJECT', project });
}).catch((err) => {
dispatch({type: 'ÇREATE_PROJECT_ERROR', err})
})
}
};

Related

Child component is not updating parent's state in React.js functional component

I have a component that renders a child component. The child component manages its own state, and I am trying to pass the updated state to the parent, using a callback, to no success. I have tried for hours to identify the problem but haven't been able to figure it out. My parent component is this (without imports):
const formReducer = (state, action) => {
switch (action.type) {
case 'SET_CATEGORY':
return {
category: action.category
};
default:
return state;
}
};
function LogService() {
const initialFormState =
{
category: ''
};
const [formState, dispatch] = useReducer(formReducer, initialFormState);
const getCategoryState = useCallback(category => {
dispatch({
action: 'SET_CATEGORY',
category: category
}, []);
}
);
const submitHandler = event => {
event.preventDefault();
console.log(formState);
};
return (
<>
<form onSubmit={submitHandler}>
<CategoryOne sendState={getCategoryState} />
<button>send</button>
</form>
</>
);
};
export default LogService;
And this is my child component:
const selectionReducer = (state, action) => {
switch (action.type) {
case 'DISPLAY_SELECTION':
return {
...state,
selectionIsVisible: true
};
case 'LOG_SELECTION':
return {
...state,
category: action.category,
selectionIsVisible: false
}
default:
return state;
}
};
function CategoryOne(props) {
const [selectionState, dispatch] = useReducer(selectionReducer, {});
const { category } = selectionState;
const { sendState } = props;
useEffect(() => {
sendState(category);
}, [category, sendState])
const displaySelectionHandler = event => {
dispatch({
type: 'DISPLAY_SELECTION'
});
};
const selectCategoryHandler = event => {
dispatch({
type: 'LOG_SELECTION',
category: event.target.id
});
};
return (
<>
<div className="container">
<div className={`options-container ${selectionState.selectionIsVisible && 'active'}`}>
<div className="option">
<input className="radio" type="radio" id="One" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Two" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Three" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Four" name="category" onChange={selectCategoryHandler} />
</div>
</div>
<div className="selected" id="category" onClick={displaySelectionHandler}>
Category
</div>
</div>
</>
);
};
export default CategoryOne;
I am not getting Errors, just a Warning:
React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?
I don't understand that warning, I do have an array of dependencies. other than that, selectionIsVisible: true (in the 'DISPLAY_SELECTION' action) works, but selectionIsVisible: false (in the 'LOG_SELECTION' action).
Could someone please help me out? I am very frustrated.
Because use put [] wrong place. Just update like this:
const getCategoryState = useCallback((category) => {
dispatch({
action: "SET_CATEGORY",
category: category,
});
}, []);

How to set state object values into redux store

I have form where I have 2 input textboxes. On its change handler I am setting their respective values into state object. However I want to store those 2 values into redux store so that I can use it on multiple components. Is there anyway where I can store those 2 input values into state and in redux store as well. Below is my login componet code. Thanks in advance.
import React from "react";
import { connect } from "react-redux";
import * as loginAction from "../redux/actions/LoginAction";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",//want to have this value in redux store so that I can use it in multiple components
password: "",
errorUsername: null,
errorPassword: null,
};
this.handleValidation = this.handleValidation.bind(this);
this.handleChange = this.handleChange.bind(this);
}
//assign textbox values to props
handleChange = (e) => {
this.setState({
[e.target.name]: [e.target.value],
});
};
//handle input validation
handleValidation = (event) => {
if (!this.state.username) {
this.setState({ errorUsername: "Please enter User Name" });
event.preventDefault();
}
if (!this.state.password) {
this.setState({ errorPassword: "Please enter Password" });
event.preventDefault();
}
if (this.state.password && this.state.username) {
this.setState({ errorUsername: null, errorPassword: null });
let postData = {
username: this.state.username[0],//want to have this value in redux store so that I can use it in multiple components
password: this.state.password[0],
};
event.preventDefault();
//dispatching an action
this.props.dispatch(loginAction.checkLogin(postData, this.props.history));
}
};
render() {
return (
<div className="d-flex flex-column">
<div className="d-flex globalStyle">
<div className="w-100 justify-content-start p-5">
<div className="p-10 bg-white">
<div className="Login">
<form>
<div className="d-flex flex-column">
<div>Login</div>
<div className="d-flex flex-row">
<div>
<b>User name</b>
</div>
</div>
<div>
<input
type="username"
name="username"
className="inputText"
id="exampleInputUserName"
value={this.props.userName}
onChange={this.handleChange}
placeholder="Enter User Name"
></input>
</div>
<div className="text-danger d-flex flex-row p-2 ml-2">
{this.state.errorUsername && (
<div>{this.state.errorUsername}</div>
)}
</div>
<div className="d-flex flex-row">
<div>
<b>Password</b>
</div>
</div>
<div className="d-flex flex-row p-2 ml-2">
<input
type="password"
name="password"
className="inputText"
value={this.props.password}
onChange={this.handleChange}
placeholder="Enter Password"
></input>
</div>
<div className="text-danger d-flex flex-row p-2 ml-2">
{this.state.errorPassword && (
<div>{this.state.errorPassword}</div>
)}
</div>
<div className="d-flex flex-row justify-content-around p-2 ml-2">
<button
type="submit"
onClick={this.handleValidation}
className="button-style"
>
Login
</button>
</div>
</div>
<div>
<br></br>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
userDetails: state.userDetails,
};
}
export default connect(mapStateToProps)(Login);
Mu login action code is
const getUserDetailsSuccess = (userDetails) => ({
type: "GET_DETAILS",
userDetails,
});
export const checkLogin = (loginData, history) => {
const url = `login`;
return (dispatch) => {
return service
.post(url, loginData)
.then((res) => {
const userDetails = res.data.response_message;
dispatch(getUserDetailsSuccess(userDetails));
})
.catch((error) => {
throw error;
});
};
};
My Reducer code is
function loginReducer(state = { userDetails: {} }, action) {
switch (action.type) {
case "GET_DETAILS":
return { userDetails: action.userDetails };
default:
return state;
}
}
export default loginReducer;
My code is working fine without any issue.
Just add loginData into your dispatch
const getUserDetailsSuccess = (userDetails, loginData) => ({
type: "GET_DETAILS",
userDetails,
loginData
});
export const checkLogin = (loginData, history) => {
const url = `login`;
return (dispatch) => {
return service
.post(url, loginData)
.then((res) => {
const userDetails = res.data.response_message;
dispatch(getUserDetailsSuccess(userDetails, loginData));
})
.catch((error) => {
throw error;
});
};
};
and in the reducer action.loginData will be the content you want (don't sure how you want to store it)
function loginReducer(state = { userDetails: {} }, action) {
switch (action.type) {
case "GET_DETAILS":
return { userDetails: { ...action.userDetails, ...action.loginData } };
default:
return state;
}
}
export default loginReducer;

Updating entries on Firebase (redux-react)

I am stuck around a project and honestly I don't know how to solve it (I am quite new before you judge)
so this is my code:
class EditProfile extends Component {
state = {
företagsnamn: '',
organisationsnummer: '',
};
handleChange = e => {
this.setState({
[e.target.id]: e.target.value
});
};
handleSubmit = e => {
e.preventDefault();
// console.log(this.state);
this.props.editProfile(this.state);
this.props.history.push("/dash");
};
render() {
const { auth, profile } = this.props;
if (auth.isEmpty) return <Redirect to="/dash" />;
return (
<div >
<form className="white" onSubmit={this.handleSubmit}>
<div className="row">
<div className="col xl6 l6 m6 s12">
<label>Foretagsnamn:</label>
<input
type="text"
disabled
placeholder={profile.foretagsnamn}
id="foretagsnamn"
onChange={this.handleChange}
/>
</div>
<div className="col xl6 l6 m6 s12">
<label>organisationsnummer:</label>
<input
type="number"
placeholder={profile.organisationsnummer}
id="organisationsnummer"
onChange={this.onChange}
/>
</div>
</div>
<div className="input-field">
<button className="btn orange lighten-1" style={{width:'100%'}} >Submit</button>
{ }
</div>
</form>
</div>
}}
const mapStateToProps = state => {
return {
auth: state.firebase.auth,
profile: state.firebase.profile
};
};
const mapDispatchToProps = dispatch => {
return {
editProfile: profil => dispatch(editProfile(profil))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(EditProfile);
this was the action
export const editProfile = (profil) => {
return (dispatch, getState, { getFirestore, getFirebase }) => {
const firebase = getFirebase();
const firestore = getFirestore();
const profile = getState().firebase.auth
console.log(profile)
const authorId = getState().firebase.auth.uid;
// const foretagsnamn = getFirestore().firestore.collection('users').doc(profile.uid).foretagsnamn
// firebase.auth()
firestore.collection('users').doc(profile.uid).set({
// foretagsnamn: foretagsnamn,
// organisationsnummer: profil.organisationsnummer,
adress: profil.adress,
ort: profil.ort,
telefonnummer: profil.telefonnummer,
postnummer: profil.postnummer,
}, { merge: true }
).then(() => {
dispatch({ type: 'UPDATE_SUCCESS' });
}).catch(err => {
dispatch({ type: 'UPDATE_ERROR' }, err);
});
}}
and this the reducer
const editProfileReducer = (state = initState, action) => {
switch (action.type) {
case "EDITPROFILE_ERROR":
return {
...state,
editError: action.error
};
case "EDITPROFILE_SUCCESS":
return {
...state,
user:action.user
};
default:
return state;
}
}
export default editProfileReducer;
however when I press the button submit it shows this error:
FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined
PS: Solved. The action was wrong. I changed ´´´const profile = getState().firebase.auth.```**instead of profile. **
Stays open if someone needs.

Unable to fetch github users using redux

I am trying to fetch github users on providing username, but unable to
fetch. Can anyone tell what I am missing , as I see the code seem
perfect.
I am trying to fetch github users on providing username, but unable to
fetch. Can anyone tell what I am missing , as I see the code seem
perfect.
Below is my code for component, action, reducer
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {
userName: ""
};
this.searchUser = this.searchUser.bind(this);
this.onChange = this.onChange.bind(this);
}
componentDidMount(){
console.log(this.props.users)
}
searchUser(e) {
e.preventDefault();
this.props.searchUser(this.state.userName);
this.setState({ userName: "" });
}
onChange(e) {
this.setState({ [e.target.id]: e.target.value }, () =>
console.log(this.state.userName)
);
}
render() {
return (
<nav className="navbar fixed-top navbar-expand-md navbar-light bg-primary">
<div className="container">
<h4>Github Search</h4>
<form className="form-inline my-1 my-lg-0" onSubmit={this.searchUser}>
<div className="input-group add-on">
<input
type="search"
className="form-control mr-sm-2 border-right-0 border"
id="userName"
placeholder="Search User..."
aria-label="Search"
onChange={this.onChange}
value={this.state.userName}
/>
</div>
</form>
</div>
</nav>
);
}
}
const mapStateToProps = state => {
return {
users: state.users
};
};
export default connect(
mapStateToProps,
{ searchUser }
)(Navbar);
-------------------------------------
export const searchUser = userName => dispatch => {
console.log("----" + userName);
fetch("https://api.github.com/search/users?q=" + userName)
.then(res => res.json())
.then(users =>
dispatch({
type: "FETCH_USERS",
payload: users.items
})
);
};
--------------------------------------------
export default function(state = { users: [] }, action) {
switch (action.type) {
case "FETCH_USERS":
return {
...state,
users: action.payload
};
default:
return state;
}
}
--------------------------------------------
I am able to pass submitted username to actions but after dispatch
there seem some error.

ReactJS + Redux Edit form

I have the following form:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { updateExpert, fetchExpert } from "../../store/actions/expertActions";
class ExpertForm extends Component {
state = {
expert: {}
};
componentWillMount() {
console.log("ComponentWillMount");
const id = this.props.match.params.id;
console.log("Will fetch expert with id", id);
this.props.fetchExpert(id);
}
handleChange = e => {
console.log(e);
this.setState({
expert: {
...this.state.expert,
[e.target.id]: e.target.value
}
});
};
componentWillReceiveProps(nextProps) {
const newExpert = nextProps.expert;
console.log("got new expert ", newExpert);
this.setState({
expert: nextProps.expert
});
}
handleSubmit = e => {
e.preventDefault();
const originalExpert = this.props.expert;
console.log("Expert before", originalExpert);
// const updatedExpert = {
// firstName: this.state.expert.firstName,
// lastName: this.state.expert.lastName,
// bio: this.state.expert.bio,
// country: originalExpert.country,
// interestIds: originalExpert.interestIds,
// city: originalExpert.city,
// summary: originalExpert.summary,
// websiteText: originalExpert.websiteText,
// websiteUrl: originalExpert.websiteUrl
// };
const updatedExpert = this.state.expert;
console.log("Expert after", updatedExpert);
//call action
this.props.updateExpert(originalExpert.userId, updatedExpert);
};
render() {
const { expert } = this.props;
return (
<div className="container">
<div className="card">
<form onSubmit={this.handleSubmit} className="white">
<div className="card-content">
<h5 className="grey-text text-darken-3">Update expert</h5>
<div className="row">
<div className="input-field col s6">
<label htmlFor="firstName">First Name</label>
<input
onChange={this.handleChange}
type="text"
id="firstName"
/>
</div>
<div className="input-field col s6">
<label htmlFor="lastName">Last Name</label>
<input
onChange={this.handleChange}
type="text"
id="lastName"
/>
</div>
</div>
<div className="input-field">
<label htmlFor="bio">Bio</label>
<textarea
className="materialize-textarea"
id="bio"
onChange={this.handleChange}
/>
</div>
<div className="input-field">
<label htmlFor="summary">Summary</label>
<textarea
className="materialize-textarea"
id="summary"
onChange={this.handleChange}
/>
</div>
<div className="row">
<div className="input-field col s6">
<label htmlFor="country">Country</label>
<textarea
className="materialize-textarea"
id="country"
onChange={this.handleChange}
/>
</div>
<div className="input-field col s6">
<label htmlFor="city">City</label>
<textarea
className="materialize-textarea"
id="city"
onChange={this.handleChange}
/>
</div>
</div>
<div className="row">
<div className="input-field col s6">
<label htmlFor="websiteText">Website text</label>
<textarea
className="materialize-textarea"
id="websiteText"
onChange={this.handleChange}
/>
</div>
<div className="input-field col s6">
<label htmlFor="websiteUrl">Website URL</label>
<textarea
className="materialize-textarea"
id="websiteUrl"
onChange={this.handleChange}
/>
</div>
</div>
</div>
<div className="card-action">
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Update</button>
</div>
</div>
</form>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
expert: state.experts.item
});
const mapDispatchToProps = dispatch => {
return {
updateExpert: (id, expert) => dispatch(updateExpert(id, expert)),
fetchExpert: id => dispatch(fetchExpert(id))
};
};
export default connect(
mapStateToProps, //mapstatetoprops
mapDispatchToProps //mapdispatchtoprops
)(ExpertForm);
Now this form is used mostly to edit an item of the Expert type, not adding it. Which means I should prefill it with the information already stored in the database.
However when I try to set the value directly on an input like so:
<input
value={expert.firstName}
onChange={this.handleChange}
type="text"
id="firstName"
/>
I get the following error:
index.js:1452 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
This is the ExpertList component from which the user accesses this ExpertForm:
import React, { Component } from "react";
import PropTypes from "prop-types";
import ExpertItem from "./expert-item";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { fetchExperts } from "../../store/actions/expertActions";
class ExpertList extends Component {
componentWillMount() {
console.log("ComponentWillMount");
this.props.fetchExperts();
}
componentWillReceiveProps(nextProps) {
console.log("Rceived new props");
}
render() {
const { experts } = this.props;
const expertsDom = experts.map(expert => (
<Link to={"/expert/edit/" + expert.userId}>
<ExpertItem key={expert.userId} expert={expert} />
</Link>
));
return <div className="expert-list section">{expertsDom}</div>;
}
}
const mapStateToProps = state => ({
experts: state.experts.items
});
export default connect(
mapStateToProps,
{ fetchExperts }
)(ExpertList);
These are my actions :
import {
FETCH_EXPERTS,
UPDATE_EXPERT,
ADD_EXPERT,
FETCH_EXPERT
} from "./types";
import axios from "../../network/axios";
export const createExpert = expert => {
return (dispatch, getState) => {
//make async call to database
dispatch({ type: ADD_EXPERT, expert: expert });
// type: ADD_EXPERT;
};
};
export const fetchExpert = id => {
return (dispatch, getState) => {
console.log("fetching expert with id ", id);
axios
.get("/connections/experts")
.then(response => {
const selectedExpert = response.data.filter(e => {
return e.userId === id;
})[0];
console.log("ExpertsData ", selectedExpert);
// const newState = Object.assign({}, this.state, {
// experts: newExperts
// });
dispatch({
type: FETCH_EXPERT,
payload: selectedExpert
});
})
.catch(error => {
console.log(error);
});
};
};
//Thunk allows us to call dispatch directly so that we can make async requests
//We can consider dispatch a resolver/promise, calling dispatch is just sending
//the data back
export const fetchExperts = () => {
return (dispatch, getState) => {
console.log("fetching");
console.log("getstate ", getState());
const accessToken = getState().auth.authInfo.accessToken;
console.log("authToken ", accessToken);
axios
.get("/connections/experts")
.then(response => {
const newExperts = response.data;
console.log("ExpertsData ", newExperts);
// const newState = Object.assign({}, this.state, {
// experts: newExperts
// });
dispatch({
type: FETCH_EXPERTS,
payload: newExperts
});
})
.catch(error => {
console.log(error);
});
};
};
export const updateExpert = (id, expertData) => {
return dispatch => {
console.log("updating expert", id, expertData);
axios
.put("/experts/" + id, expertData)
.then(response => {
const updatedExpert = response.data;
dispatch({
type: UPDATE_EXPERT,
payload: updatedExpert
});
})
.catch(error => {
console.log(error);
});
};
};
And this is my reducer:
import {
FETCH_EXPERTS,
UPDATE_EXPERT,
FETCH_EXPERT
} from "../../store/actions/types";
const initialState = {
items: [],
item: {}
};
const expertReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_EXPERT:
console.log("reducer fetch by id");
return {
...state,
item: action.payload
};
case FETCH_EXPERTS:
console.log("reducer fetch");
return {
...state,
items: action.payload
};
case UPDATE_EXPERT:
console.log("reducer update");
return {
...state,
item: action.payload
};
default:
return state;
}
};
export default expertReducer;
Instead of using value property, You need to use defaultValue as described here in Default Values section if You want to have a default value for input field.
The problem is that your value is undefined before Redux's state is loaded. You can solve this by giving it an empty string by default, something like this:
<input
value={typeof expert.firstName === 'undefined' ? '' : expert.firstName}
onChange={this.handleChange}
type="text"
id="firstName"
/>

Resources