componentDidUpdate doesn't update state with Redux - javascript

The goal of this app is to let met add an item in a Flatlist present in the List Item screen, using React-Redux and React Navigation. Basically I type name and category in the Create Item screen and send it in the form of an array to the List Item screen with React Navigation, and once I'm in the List Item screen I use componentDidMount to dispatch the action and update the state in the class compoment, the problem is that nothing shows up, even using the console.log it just gives me back the empty array present in the Redux Reducers screen.
CREATE ITEM SCREEN
export class item extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
category: '',
};
}
submitItem = (name, category) => {
this.props.navigation.navigate("ListItem", {
itemList: {
name: name,
category: category,
}});
};
render() {
const { name, category } = this.state;
return (
<Container>
<Header>
<Left>
<Button onPress={() =>
this.submitItem(
this.state.name,
this.state.category,
)
}>
<Text>Sumbit</Text>
</Button>
ITEM LIST SCREEN
class ListItem extends Component {
constructor(props) {
super(props);
this.state = {
itemList:[],
};
}
componentDidMount (props, state) {
if (this.props.route.params?.itemList) {
() => this.props.dispatch({type:'ADD_ITEM'});
}
return null;
}
REDUX REDUCER
const initialState = {
currentUser: null,
itemList: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case USER_STATE_CHANGE:
return {
...state,
currentUser: action.currentUser,
};
case 'ADD_ITEM':
return{
itemList: state.itemList,
}
default:
return state
}
};

I think when you are dispatching an action you are not adding the action.payload to the state.itemList.What I meant
const initialState = {
currentUser: null,
itemList: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case USER_STATE_CHANGE:
return {
...state,
currentUser: action.currentUser,
};
case 'ADD_ITEM':
return{
...state,
itemList: addItemToList(state.itemList,action.payload), //a util function to add items to the list.
// And action.payload is the value ,which passed when you are dispatching the action 'ADD_ITEM'
}
default:
return state
}
};
And when you are dispatching the action it should be
componentDidMount (props, state) {
if (this.props.route.params?.itemList) {
() => this.props.dispatch({type:'ADD_ITEM',payload:this.props.route.params.itemList});
// passing the itemList to as the payload of the action.
}
return null;
}
I guess this modification should suffice. More on React-Redux here

Related

Actions must be plain objects. Instead, the actual type was: 'undefined'. React-Redux

I'm learning React-Redux, and I'm trying to build an app in which I write an input called trial in LIST CREATION, insert it in list and through the function updateList update the initial state of list in the REDUCER, and then display that list in the TRIALLIST screen, since nothing really happened when I launched the code, I've put a console.log in the INDEX.JS and it returns the error Actions must be plain objects. Instead, the actual type was: 'undefined'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions., I've tried googling it but I could not seem to find a solution. Thank you in advance for your help.
LIST CREATION
import { connect } from 'react-redux';
import { updateList } from '../../../../../redux/actions/index.js';
class trial extends Component {
constructor(props) {
super(props);
this.state = {
trial: '',
list: [],
};
}
submitTrial(){
let list = this.state.list;
list.push(this.state.trial);
this.props.updateList(list);
this.props.navigation.navigate("TrialList");
}
render() {
return (
<Button transparent>
<Icon
name="checkmark"
onPress={() => this.submitTrial()}
/>
</Button>
<TextInput
placeholder='type here'
onChangeText={(trial) => this.setState({ trial })}
/>
const mapDispatchToProps = { updateList };
export default connect( mapDispatchToProps )( trial );
TRIALLIST
class TrialList extends Component {
constructor(props) {
super(props);
this.state = {
list: this.props.list,
};
}
render() {
return (
<FlatList
data={this.state.list}
renderItem={({ item }) => (
//some data ///
/>
function mapStateToProps(store){
return{
list: store.userState.list
};
}
export default connect(mapStateToProps)(TrialList);
INDEX.JS
import { ADD_LIST } from "../constants/index";
export const updateList = (list) => {
return console.log({ type: ADD_LIST, payload: list}) <----------------------HERE
}
REDUCER
import { USER_STATE_CHANGE, ADD_LIST } from "../constants";
const initialState = {
currentUser: null,
list: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case USER_STATE_CHANGE:
return {
...state,
currentUser: action.currentUser,
};
case ADD_LIST:
return{
...state,
list: [...action.payload],
}
default:
return state
}
};
APP.JS
const store = createStore(rootReducer, applyMiddleware(thunk));
export class App extends React.Component {
render() {
return (
<Provider store={store}>
<TrialList/>
<trial/>
<Provide/>
Why are you returning console.log here?
export const updateList = (list) => {
return console.log({ type: ADD_LIST, payload: list}) <----------------------HERE
}
console.log returns undefined, and, if you want to log the action triggered, then, console.log it first and then return the object like this.
export const updateList = (list) => {
console.log({ type: ADD_LIST, payload: list}) <----------------------HERE
return { type: ADD_LIST, payload: list}
}
export const updateList = (list) => ({
type: ADD_LIST, payload: list
})
You are missing the parenthesis around after the arrow and before closing the function body.

How can I use Redux to only update one instance of a component?

I'm trying to use Redux to update my Card Component to disable and change colors on click. Redux dispatches the action fine, but it updates all Cards not just the one that was clicked. Each Card has an object associated with it that hold the word and a value. The value is the className I want to use to change the color when clicked
Component
const Card = ({ wordObj, updateClass, isDisabled, cardClass }) => {
const showColor = (e) => {
updateClass(wordObj);
console.log(cardClass)
};
return (
<button
onClick={(e) => showColor()}
disabled={isDisabled}
className={cardClass}>
{wordObj.word}
</button>
);
};
const mapStateToProps = (state) => ({
cardClass: state.game.cardClass,
});
export default connect(mapStateToProps, { updateClass })(Card);
Action
export const updateClass = (obj) => (dispatch) => {
console.log(obj)
dispatch({
type: UPDATE_CARD,
payload: obj,
});
};
Reducer
const initialState = {
words: [],
cardClass: 'card',
isDisabled: false,
};
export default function (state = initialState, action) {
const { type, payload } = action;
switch (type) {
case SET_WORDS: {
return {
...state,
words: payload,
};
}
case UPDATE_CARD:
return {
...state,
isDisabled: true,
cardClass: ['card', payload.value].join(' '),
};
default:
return state;
}
}```
All of your card components are consuming the same cardClass field in the state. When you modify it in this line:
cardClass: ['card', payload.value].join(' ')
All cards that are consuming this field have their classes updated. The same occurs to the isDisable field.
You need to create one object for each card in your state. Here is my implementation (was not tested):
const initialState = {
cards: []
};
export default function (state = initialState, action) {
const { type, payload } = action;
switch (type) {
// create a card object for each word
case SET_WORDS: {
return {
...state,
cards: payload.map(word => {
return { word: word, cardClass: "card", isDisabled: false }
})
};
}
case UPDATE_CARD:
// here i'm using the wordObj.word passed as payload
// to identify the card (i recommend to use an id field)
const cardIndex = state.cards.findIndex(card => card.word === payload.word);
// get the current card
const card = state.cards[cardIndex];
// create an updated card object obeying the immutability principle
const updatedCard = { ...card, isDisabled: true, cardClass: ['card', payload.value].join(' '), }
return {
...state,
cards: [
...state.cards.slice(0, cardIndex), // cards before
updatedCard,
...state.cards.slice(cardIndex + 1) // cards after
]
};
default:
return state;
}
}
Your mapStateToProps selects a string, but said string changes on any updateClass and that causes all your cards to update, because the selection of state.game.cardClass produces a different value, which triggers a new render for the connected component.
Maybe what you want, is something that identifies the selection, i.e. an id for each card, and select with that id in the mapStateToProps to avoid reading the change, because what's happening right now is the following:
Card A[className="card A"] == after dispatch ==> mapStateToProps => [className="card B"]
Card B[className="card A"] => dispatch('B') => mapStateToProps => [className="card B"]
B is updating the state of both A and B, and that's why the extra render occurs

Trying to populate props with async promise inside of ComponentDidMount

So inside of my uncontrolled PossibleMatches component, I know from the way React works, the initial rendering phase will occur with empty prop values (if those prop values rely on external application state (mapStateToProps)) regardless of whether or not I have a componentDidMount lifecycle method or constructor setup. In response to this, I've setup a promise inside of the componentDidMount so that when I dispatch prop functions [defaultPieces, arrangePieces], I can have the UI render an ActivityIndicator to indicate something is currently fetching. The problem is, I cannot seem to get the mapStateToProps function to understand the state when I call mapStateToProps from within the success phase of the promise. Here it is:
class PossibleMatches extends Component {
constructor(props){
super(props);
}
componentDidMount(props){
return new Promise((resolve, reject) => {
let state;
let {defaultPieces, arrangePieces, isFetching} = this.props;
let makeClothesAppear = function(){
defaultPieces();
arrangePieces();
isFetching = true;
}
resolve(makeClothesAppear());
}).then(function(state){
mapStateToProps(state);
this.props.isFetched = true
this.props.isFetching = false;
}).catch((error) => {
console.log('FetchClothesError: ', error);
})
}
}
How the UI would make a decision on what to display:
renderDecision(){
const {UpperComponents, LowerComponents} = this.props;
const {currentUpperComponent, currentLowerComponent} = this.state.currentComponent.whichPiece;
const {LowerComponentEnabled, UpperComponentEnabled} = this.state;
if (this.props.isFetching){
return (<div className='activityLoader'>
<ActivityIndicator number={3} duration={200} activeColor="#fff" borderWidth={2} borderColor="50%" diameter={20}/>
</div>);
} else if (this.props.isFetched){
return (<div className = "PossibleMatches_Container">
<i className = 'captureOutfit' onClick = {this.snapshotMatch}></i>
{UpperComponents.map((component) => {
return (<UpperComponent key={component.createdAt} id={component.id}
switchComponent={this.switchFocus}
setCurrentPiece = {this.setNewPiece}
evaluatePiece={this.isOppositeComponentSuggested}
image={component.image}
toggleToPiece = {(LowerComponentEnabled) => {if (LowerComponentEnabled === false){this.setState({LowerComponentEnabled: true})}else{return;} this.setState({currentLowerComponent: this.props.suggestedBottoms[0]})}}
isLowerComponentEnabled={LowerComponentEnabled}
ref={this.residingUpperComponent}
className = {this.state.currentComponent.whichPiece.whichType === 'match' ? 'PossibleMatches_Container' : this.state.currentComponent.whichPiece.whichType === 'bottom' ? 'standalonePiece' : 'standalonePiece'}/>)
})
}
{LowerComponents.map((component) => {
return (<LowerComponent key={component.createdAt} id={component.id}
setCurrentPiece = {this.setNewPiece}
evaluatePiece={this.isOppositeComponentSuggested}
image={component.image}
toggleToPiece={(UpperComponentEnabled) => {if (UpperComponentEnabled === false){this.setState({UpperComponentEnabled: true})}else{return;} this.setState({currentUpperComponent: this.props.suggestedTops[0]})}}
switchComponent={this.switchFocus}
isUpperComponentEnabled={UpperComponentEnabled}
ref={this.residingLowerComponent}
className = {this.state.currentComponent.whichPiece.whichType === 'match' ? 'PossibleMatches_Container' : this.state.currentComponent.whichPiece.whichType === 'bottom' ? 'standalonePiece' : 'standalonePiece'}/>)
})
}
</div>)
}
}
render(){
return(
<div className = 'GorClothingContainer'>
{/*<Wardrobe upperComponent={this.state.currentComponent.whichPiece.currentUpperComponent} lowerComponent={this.state.currentComponent.whichPiece.currentLowerComponent} enableCapture={(snapshot) => this.snapshotMatch = snapshot} />*/}
{this.renderDecision()}
</div>
);
}
My PossibleMatches Reducer
import {INITIAL_PIECES, GET_ANCILLARY_PIECES, ORGANIZE_PIECES, SET_CONTEMPLATED_PIECE} from '../actions/types';
const initialState = {
UpperComponents: [],
LowerComponents: [],
contemplated_piece: null,
extraTops: [],
extraBottoms: [],
standaloneTops: [],
standaloneBottoms: [],
suggestedTops: [],
suggestedBottoms: []
}
export default function(state = initialState, action){
switch(action.type){
case INITIAL_PIECES:
return Object.assign({}, state, {contemplated_piece: action.payload.contemplated_piece},
{extraTops: action.payload.extra_tops},
{extraBottoms: action.payload.extra_bottoms},
{standaloneTops: action.payload.standalone_tops},
{standaloneBottoms: action.payload.standalone_bottoms},
{suggestedTops: action.payload.suggested_tops},
{suggestedBottoms: action.payload.suggested_bottoms})
case GET_ANCILLARY_PIECES:
return Object.assign({}, state, {extraTops: action.payload.extra_tops},
{extraBottoms: action.payload.extra_bottoms},
{standaloneTops: action.payload.standalone_tops},
{standaloneBottoms: action.payload.standalone_bottoms},
{suggestedTops: action.payload.suggested_tops},
{suggestedBottoms: action.payload.suggested_bottoms})
case ORGANIZE_PIECES:
return Object.assign({}, state, {UpperComponents: action.payload.UpperComponents},
{LowerComponents: action.payload.LowerComponents})
case SET_CONTEMPLATED_PIECE:
return Object.assign({}, state, {contemplated_piece: action.payload.contemplated_piece})
default:
return state;
}
}
My combineReducers segment
import {combineReducers} from 'redux';
const allReducers = combineReducers({
Playlist: PlaylistReducer,
eventOptions: eventTicketReducer,
possibleMatches: PossibleMatchesReducer,
Intro: combineForms({
basicUserInfo: BasicUserInfoState,
GenderInfo: GenderInfoState,
ContactInfo: ContactInfoState
}, 'Intro'),
routing: routerReducer,
form: formReducer
});
Prop Values:
PossibleMatches.defaultProps = {
isFetching: true,
isFetched: false
}
My mapStateToProps function
function mapStateToProps(state){
return {UpperComponents: state.possibleMatches.UpperComponents,
LowerComponents: state.possibleMatches.LowerComponents,
contemplatedPiece: state.possibleMatches.contemplated_piece,
extraTops: state.possibleMatches.extraTops,
extraBottoms: state.possibleMatches.extraBottoms,
standaloneTops: state.possibleMatches.standaloneTops,
standaloneBottoms: state.possibleMatches.standaloneBottoms,
suggestedTops: state.possibleMatches.suggestedTops,
suggestedBottoms: state.possibleMatches.suggestedBottoms}
}
function mapDispatchToProps(dispatch){
return {
defaultPieces: () => {
dispatch(defaultPieces())
},
arrangePieces: () => {
dispatch(arrangePieces())
},
getCorrespondingPieces: () => {
dispatch(getCorrespondingPieces())
},
setEvaluatedPiece: () => {
dispatch(setEvaluatedPiece())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PossibleMatches)
My Question is: What exactly is wrong with the way that I've implemented the promise. With the reducers and the redux actions setup correctly(I know because I've logged the fetched items to the console from the redux actions file), how can I properly populate the prop values in mapStateToProps. Currently the error is:
Im using React 16.4.0
A simple redux use case would seem as follows
possibleMatches.jsx (Component file)
class PossibleMatches extends React.Component {
state = {
isFetching: false
}
componentDidMount() {
this.setState({isFetching: true})
fetchingSomethingFromServer()
.then(resp => {
this.setState({isFetching: false})
this.props.UpdateRedux(resp)
});
}
render() {
const { isFetching } = this.state;
const { data } = this.props;
return (
isFetching ? <div>loading...</div> : <div>{data}</div>
)
}
}
export default connect(state => ({ data: state.possibleMatches.data }), {UpdateRedux})
actions.js (action creator file)
Use this action to update any data into redux
export const UpdateRedux = (data) => {type: 'UPDATE_REDUX', payload: data}
reducers.js
This is the file that holds the redux state
const defaultState = {
data: null
}
export default (state = defaultState, action) => {
switch(action.type) {
case 'UPDATE_REDUX':
return {data: action.payload};
default:
return state
}
}
In your combine reducers import this reducer and assign it as follows
import possibleMatches from 'reducers.js';
combineReducers({ possibleMatches });

mapStateToProps doesn't map to props for some reason

I'm fairly new to React/Redux. The redux Chrome devtools tell me that I'm successfully creating and modifying state. However, while the console log 'dah state' runs and satisfactorily tells me that my state has the correct information in it, I'm not mapping to props at that point.
I'm not entirely sure if my reducer is made correctly, but I suspect that it is because I'm creating new state, even though it doesn't map to props.
I'm also fairly sure that mapStateToProps, while it runs, is not triggering a rerender
Here is my relevant container
import React, { Component, PropTypes } from 'react';
import TopicsGrid from '../components/TopicsGrid.jsx';
import { connect } from 'react-redux';
import { fetchTopics } from '../actions/topics';
import Main from '../components/Main.jsx';
class AboutContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
topics: [{
title: '',
description: '',
link: '',
src: '',
message: '',
selected: false,
_id: ''
}]
}
}
onChange = (action) => {
this.props.dispatch(action);
}
componentDidMount() {
fetchTopics();
}
componentWillReceiveProps(nextProps) {
console.log('nextProps', nextProps)
this.setState({
topics: nextProps.topics
})
}
render() {
console.log('PROPS', this.props)
return (
<div className="container">
<TopicsGrid
topics={this.state.topics}
onChange={this.onChange}/>
</div>
);
}
};
AboutContainer.propTypes = {
dispatch: PropTypes.func.isRequired,
topics: PropTypes.array.isRequired
};
AboutContainer.defaultProps = {
state: {
topics: [{
title: '',
description: '',
link: '',
src: '',
message: '',
selected: false,
_id: ''
}]
}
};
const mapDispatchToProps = (dispatch) => {
return {
dispatch: dispatch
}
}
const mapStateToProps = (state) => {
console.log('dah state', state)
return Object.assign({}, state, {
topics: state.topics.topics
})
}
export default connect(mapStateToProps, mapDispatchToProps)(AboutContainer);
Here is my reducer
import * as types from '../constants/action-types';
import * as SectionNames from '../constants/section-names';
const initialState = {
topics: []
}
export default function about(state = initialState, action) {
if (action.section !== SectionNames.TOPICS) {
return state;
}
let mods = {};
switch (action.type) {
case types.FETCH_TOPICS_SUCCESS:
mods = {
topics: action.topics
}
// return Object.assign({}, state, {
// topics: action.topics
// });
break;
case types.FETCH_TOPICS_ERROR:
mods = {
topics: action.topics
}
// return Object.assign({}, state, {
// topics: action.topics
// });
break;
case types.TOPIC_SELECTED:
console.log('selected')
//topic can be selected or unselected
//only one topic can be selected at once.
mods = {
topics: action.topics
}
mods.topics[action.index].selected = true;
return Object.assign({}, state, mods);
break;
case types.TOPIC_UNSELECTED:
//topic can be selected or unselected
//only one topic can be selected at once.
mods = {
topics: action.topics
}
mods.topics[action.index].selected = false
break;
default:
return state;
}
return Object.assign({}, state, mods);
}
Since you're using mapStateToProps you can use props directly instead of passing them into the component state.
render() {
const { topics } = this.props
return (
<div className="container">
<TopicsGrid
topics={topics}
onChange={this.onChange}
/>
</div>
);
}
#connect(state => ({
data: state.module.data
}), {actoionCreators});
use this at the top of your class it will decorate your class and map states to props
in your module you have to switch on action.type, in each case you should return an object with your custom changes in state for example in LOAD_SUCCESS you have to return an object like this :
return {
...state,
loading:false,
loaded:true,
data:action.data
}
so redux knows that when loadSuccess dispatched the state is gonna change with loading to false and ....
notice that reduce should return state when an unknown action dispathed so in your default case you should return state

React Native: ListView renders before dataSource being set

Listview tries to render, before the datasource is set (ComponentDidMount)
So it's always empty. if i try to call loadData() it will show it then.
How can i avoid component rendering before loading finishes?
Actions :
export const GET_COURSES = 'GET_COURSES';
export const GET_COURSES_FAILED = 'GET_COURSES_FAILED';
import getCoursesAPI from '../common/Functions';
export const getCourses = (users) => {
return dispatch => {
getCoursesAPI(users)
.then((data)=>{
const {courseList, lectureList} = data;
return dispatch(coursesSuccess(courseList, lectureList));
})
.catch(()=>{
return dispatch(coursesFailed());
});
};
}
const coursesSuccess = (courses, lectures) => {
return {
type: GET_COURSES,
payload: {
courses,
lectures
}
}
};
const coursesFailed = () => {
return {
type: GET_COURSES_FAILED
}
};
Reducer :
import * as types from "./courses.actions";
export const INITIAL_STATE = {
courses: {}
};
export default function courses(state = INITIAL_STATE, action){
const {courses, lectures} = state;
switch(action.type){
case types.GET_COURSES:
return {
...state,
courses: action.payload.courses,
lectures: action.payload.lectures
};
case types.GET_COURSES_FAILED:
return {
...state,
courses: courses ,
lectures: lectures
};
default:
return state;
}
}
Component itself :
export default class Courses extends Component {
static propTypes = {
user: PropTypes.string.isRequired,
users: PropTypes.array.isRequired,
courseDetails: PropTypes.func.isRequired,
courses: PropTypes.object.isRequired,
getCourses: PropTypes.func.isRequired,
openProfile: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
dataLoaded: 0
};
}
componentWillMount(){
}
componentDidMount(){
this.props.getCourses(this.props.users);
}
componentWillReceiveProps(newProps) {
const courses = newProps.courses.courses[this.props.user]
this.setState({
dataSource: this.state.dataSource.cloneWithRows(courses),
dataLoaded: courses.length
});
}
render() {
return (
<View style={{ height: Platform.OS == "ios" ? height - 114 : height - 130 }}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
UPDATE
#stinodes :
This fixes the issue but i think its not the proper way to do it :
componentWillMount(){
setTimeout(()=>{
console.log('!run!');
this.loadData();
}, 1000);
}
componentDidMount(){
}
async loadData(){
const {user, users, getCourses, courses} = this.props;
await getCourses(users);
const data = courses[user];
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
dataLoaded: data.length
});
}
You can use the componentWillMount-hook instead of the componentDidMount.
Using the first, sets it before the render. The latter fires after the component is rendered for the first time.
edit: Since you're using redux to update your global state and then get your data passed into your props, you will want to fetch your courses when your component mounts. You have this in place, by loading your data in the componentDidMount-hook.
However, you won't need the async keyword, since redux will be passing the courses through your component's props anyway.
When your component's props are updated, it will do a rerender as well. If you want to have your dataSource in your state, you can use the componentWillReceiveProps-hook. This hook will be fired when your component receives new properties.
When this is called, you can add your populated datasource to your state. This won't cause a new render.
Example:
class Courses extends Component {
/* ... */
componentDidMount() {
// Will fetch your data asynchronously
this.props.getCourses(this.props.users);
}
// This hook gets the new props passed. Old props are
// still available in this.props
componentWillReceiveProps(newProps) {
const courses = newProps.courses.courses[this.props.user]
this.setState({
dataSource: this.state.dataSource.cloneWithRows(courses),
dataLoaded: courses.length
})
}
/* ... */
}

Categories

Resources