I have a component which is using redux connect. In this component I have mapStateToProps which getting project from redux state and projectTransform is a value which has filter values from project redux state:
import React, { Component } from 'react';
import PropTypes from "prop-types";
import { connect } from 'react-redux';
class ProjectForm extends Component {
constructor(props){
super(props);
}
componentDidMount() {
const {
fetchProject,
} = this.props;
fetchProject();
}
onClick() {
this.setState({
project1: {
"a": 1,
"b": 2
}
})
}
render() {
const { project1 } = this.props;
return (
<div>
<button onClick={onClick()} />
</div>
)
}
}
ProjectForm.propTypes = {
fetchProject: PropTypes.func.isRequired
};
function mapDispatchToProps (dispatch) {
return
fetchProject: () => dispatch(projectActions.getProjectRequest()),
}
}
function mapStateToProps ( state ) {
const { project} = state
return {
project: project,
project1: ((project) => {
return project[0]
})(project)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ProjectForm)
I trying to now trigger re-rendering on the button but I have not clue how to do it as I tried.
this.setState((previousState) => {
project1: [JSON value from Form]
});
Also why previousState is null I would assume it would have mapStateToProps data.
Any idea how to do it without dispatching whole redux? Or how to do it in a proper way?
The problem was with reading data not from the state but props.
render() {
const { project1 } = this.state;
return (
<div>
<button onClick={onClick()} />
</div>
)
}
Related
I would like to use some data I received from firestore to build a quiz. Unfortunately I can console.log the array, but if I use .length it is undefined.
Is this problem caused by some lifecycle or asnynchronous issue?
Thanks in advance!
import React, { Component } from 'react';
import { connect } from 'react-redux';
class LernenContainer extends Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="lernenContainer">
LernenContainer
{
console.log(this.props.firestoreData),
// prints array correctly
console.log(this.props.firestoreData.length)
// is undefined
}
</div>
);
}
}
const mapStateToProps = state => {
return {
firestoreData: state.firestoreData
};
};
const mapDispatchToProps = dispatch => {
return {
// todo Achievements
};
};
export default connect(mapStateToProps, mapDispatchToProps) (LernenContainer);
console.log(this.props.firestoreData):
Try below code
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'
class LernenContainer extends Component {
constructor(props) {
super(props);
}
static propTypes = {
firestoreData: PropTypes.object.isRequired
}
render() {
const { firestoreData } = this.props
console.log(firestoreData);
console.log(firestoreData.length);
return (
<div className="lernenContainer">
</div>
);
}
}
const mapStateToProps = (state) => ({
firestoreData: state.firestoreData
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps,mapDispatchToProps)(LernenContainer);
I'm trying to edit an object and replace it in array using React and Redux like this:
case EDIT_LANGUAGE:
let languages = [...state.languageSkills];
languages[languages.findIndex(el => el.id === action.payload.id)] = action.payload;
return {
...state,
languageSkills: languages
};
'languages' array looks find before return statement, but state is not re-rendered. I guess I'm mutating state somehow. Other actions (delete, get, set) are working fine. Any tips?
EDIT. This is relevant part of the component that should render
import { setLanguages, getLanguages } from '../../actions';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux"
import React, { Component } from 'react';
class UserProfile extends Component {
constructor(props) {
super(props);
}
render() {
const languageSkillItems = this.props.languageSkills.map((languageSkill) => {
return (
<LanguageSkillItem key={languageSkill.id} item={languageSkill} />
)
});
return (
<div className="profile">
<Language languageSkillItems={languageSkillItems} />
</div>
)
}
}
const mapStateToProps = (state) => {
return {
languageSkills: state.languageSkills
};
};
const mapDispatchToProps = dispatch => {
return {
...bindActionCreators({ setLanguages, getLanguages }, dispatch)
}
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserProfile
);
You need to create a new array reference, easiest way is just to use map, like so:
case EDIT_LANGUAGE:
const languageSkills = state.languageSkills.map(el => {
if(el.id === action.payload.id) {
return action.payload;
}
return el;
});
return {
...state,
languageSkills
};
The problem is when I update state in Redux, React doesn't run the render function. I am a beginner in Redux so I am not getting what exactly should I be doing to solve this. I read about the #connect function but as I am using CreateReactApp CLI tool, I won't be able to provide support for Decorators without ejecting (Which I dont want to do).
Component:
import React from "react";
import Store from "../store";
Store.subscribe(() => {
console.log(Store.getState().Auth);
});
export default class Login extends React.Component {
login = () => {
Store.dispatch({ type: "AUTH_LOGIN" });
// this.forceUpdate(); If I forceUpdate the view, then it works fine
};
logout = () => {
Store.dispatch({ type: "AUTH_LOGOUT" });
// this.forceUpdate(); If I forceUpdate the view, then it works fine
};
render() {
if (Store.getState().Auth.isLoggedIn) {
return <button onClick={this.logout}>Logout</button>;
} else {
return <button onClick={this.login}>Login</button>;
}
}
}
Reducer:
export default AuthReducer = (
state = {
isLoggedIn: false
},
action
) => {
switch (action.type) {
case "AUTH_LOGIN": {
return { ...state, isLoggedIn: true };
}
case "AUTH_LOGOUT": {
return { ...state, isLoggedIn: false };
}
}
return state;
};
Can anyone please point me in the right direction? Thanks
You can make use of connect HOC instead of decorator, it would be implemented like
import { Provider, connect } from 'react-redux';
import Store from "../store";
class App extends React.Component {
render() {
<Provider store={store}>
{/* Your routes here */}
</Provider>
}
}
import React from "react";
//action creator
const authLogin = () => {
return { type: "AUTH_LOGIN" }
}
const authLogout = () => {
return { type: "AUTH_LOGOUT" }
}
class Login extends React.Component {
login = () => {
this.props.authLogin();
};
logout = () => {
this.props.authLogout();
};
render() {
if (this.props.Auth.isLoggedIn) {
return <button onClick={this.logout}>Logout</button>;
} else {
return <button onClick={this.login}>Login</button>;
}
}
}
const mapStateToProps(state) {
return {
Auth: state.Auth
}
}
export default connect(mapStateToProps, {authLogin, authLogout})(Login);
I have two components reactjs , I create an state redux to handle this state from two components .
`appcomponent.js
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
switch (action.type) {
case 'ADD_USER':
return [
{user:action.user}
];
default:
return state;
}
}
class appcomponent extends Component {
constructor(props) {
super(props);
this.state = {Users:[]};
//this.addUser=this.addUser.bind(this);
this.onFormSubmit=this.onFormSubmit.bind(this);
this.get=this.get.bind(this);
}
get(){
console.log(this.props.r);
}
onFormSubmit() {
this.props.send('user');
}
render() {
return (
<div>
<br /><br /><br />
<button onClick={this.onFormSubmit}>redux</button><br /><br /><br /><br />
<button onClick={this.get}>REDUX</button>
</div>
)}
}
// action
export function addUser(user) {
return {
type: 'ADD_USER',
user,
};
}
function mapDispatchToProps (dispatch) {
return {
send: user => dispatch(addUser(user))
};
};
const mapStateToProps = (state, ownProps) => {
return { r:state};
};
export default connect(mapStateToProps,mapDispatchToProps)(appcomponent);
In this component when I click "redux" button then onclick "REDUX" button I get the state changed.
In the other component I have this code :
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div><h1>{this.props.user}</h1></div>
)
}}
const mapStateToProps = (state, ownProps) => {
return { user: state[0].user};//.user
};
function mapDispatchToProps (dispatch) {
return {
get: user => dispatch(addUser('username'))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(App);
In the last component always I get the initial state created in index.js
var store = createStore(get_user,[{user:'hhhh'}]);
ReactDOM.render( <Provider store={store}>
Please who can help me ?
You only need to call createStore() once, preferably near the top of your component tree not in each component.
Assuming you wrap your app in a Provider (from redux) you'll have access to redux's central State via the mapStateToProps function (where you can assign state elements to a particular components props):
import { Provider } from 'react-redux';
import {createStore, combineReducers } from 'redux';
const store = createStore(
combineReducers({
user: usersReducer,
otherThings: otherThingsReducer
})
)
const app = (
<Provider store={store}>
<MainAppComponentOrRouter/>
</Provider>
);
ReactDOM.render(app, document.getElementById("app"));
And then in a component:
const mapStateToProps = (state, props) => {
return {
user: state.user,
otherThings: state.otherThings
};
};
export default connect(mapStateToProps)(MyComponent);
in the first component try use the following code
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state={user:[]}, action) {
switch (action.type) {
case 'ADD_USER':
return {
...state,
user:action.user
}
default:
return state;
}
}
class appcomponent extends Component {
constructor(props) {
super(props);
this.state = {Users:[]};
//this.addUser=this.addUser.bind(this);
this.onFormSubmit=this.onFormSubmit.bind(this);
this.get=this.get.bind(this);
}
get(){
console.log(this.props.r);
}
onFormSubmit() {
this.props.send('user');
}
render() {
return (
<div>
<br /><br /><br />
<button onClick={this.onFormSubmit}>redux</button><br /><br /><br /><br />
<button onClick={this.get}>REDUX</button>
</div>
)}
}
// action
export function addUser(user) {
return {
type: 'ADD_USER',
user,
};
}
function mapDispatchToProps (dispatch) {
return {
send: user => dispatch(addUser(user))
};
};
const mapStateToProps = (state, ownProps) => {
return { r:state};
};
export default connect(mapStateToProps,mapDispatchToProps)(appcomponent);
and on the second component use the following code
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div><h1>{this.props.user}</h1></div>
)
}}
const mapStateToProps = (state, ownProps) => {
return { user: state.user};//.user
};
function mapDispatchToProps (dispatch) {
return {
get: user => dispatch(addUser('username'))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(App);
I'm using react-lifecycle-component in my react app, and incurred in this situation where I need the componentDidMount callback to load some data from the backend. To know what to load I need the props, and I can't find a way to retrieve them.
here's my container component:
import { connectWithLifecycle } from "react-lifecycle-component";
import inspect from "../../../libs/inspect";
import fetchItem from "../actions/itemActions";
import ItemDetails from "../components/ItemDetails";
const componentDidMount = () => {
return fetchItem(props.match.params.number);
};
// Which part of the Redux global state does our component want to receive as props?
const mapStateToProps = (state, props) => {
return {
item: state.item,
user_location: state.user_location
};
};
// const actions = Object.assign(locationActions, lifecycleMethods);
export default connectWithLifecycle(mapStateToProps, { componentDidMount })(
ItemDetails
);
Any clues?
thanks.
import React, { Component } from 'react'
import { connect } from 'react-redux'
import fetchItem from '../actions/itemActions'
class Container extends Component {
state = {
items: []
}
componentDidMount() {
const { match } = this.props
fetchItem(match.params.number)
// if your fetchItem returns a promise
.then(response => this.setState({items: response.items}))
}
render() {
const { items } = this.state
return (
<div>
{ items.length === 0 ? <h2>Loading Items</h2> :
items.map((item, i) => (
<ul key={i}>item</ul>
))
}
</div>
)
}
const mapStateToProps = (state, props) => {
return {
item: state.item,
user_location: state.user_location
}
}
export default connect(mapStateToProps)(Container)
Though I don't see where you are using the props you take from your Redux store...