It has two child components called, ListComponent and the AddItemComponent. Moreover, I have a store with this definition.

import { EventEmitter } from 'events';

class DataStore extends EventEmitter{

constructor()
{
super();
this.todos = [
"Eat",
"Sleep",
"Die",
"Shower"
];
}

getAll(){
return this.todos;
}

addItem(newItem)
{
this.todos.push(newItem);
this.emit("change")
}

}

const dataStore = new DataStore;

export default dataStore;


It has a function for adding new item into the array and a function for fetching the array.

This is the ListComponent that is displaying the array of items from the DataStore flux store.

import React from 'react';
import TodoItem from './TodoItem';
import DataStore from './data.store';

class ListComponent extends React.Component{
constructor(props)
{
super(props)
this.state = { todos : DataStore.getAll() };
}

componentWillMount(){
DataStore.on('change', () => {
//do somethif
this.state = { todos : DataStore.getAll() };
})
}

render()
{
var deleteItem = (item) => {
this.deleteItem(item);
}
var editItem = (item) => {
this.editItem(item);
}

var addItem = (newItem) => {
this.addItem(newItem);
}
var todos = this.state.todos.map((item, index) => {
return (
<TodoItem item={item} addItem={addItem.bind(this)} deleteItem={deleteItem} editItem={editItem} />
)
});

return (
<ul>
{todos}
</ul>
)
}

deleteItem(item)
{
this.setState({ todos: this.state.todos.filter((listItem, index) => {
return listItem !== item;
}) });
}

editItem(item)
{
alert(item)
}

addItem(newItem)
{
DataStore.addItem(newItem);
}
}

module.exports = ListComponent;


It is updating the items in the change event of the DataStore store. But I am not calling the addItem function in the ListComponent. I am calling it in the AddItemComponent.
This is the definition of the AddItemComponent.

import React from 'react';
import DataStore from './data.store';

class AddItemComponent extends React.Component{
constructor(props)
{
super(props)

}

render()
{
return (
<form id="form-todo" onSubmit={this.addItem.bind(this)} action="post">
<input type='text' ref="newItem" />
<button>ADD</button>
</form>
);
}

addItem(e)
{
e.preventDefault();
DataStore.addItem(this.refs.newItem.value);
}
}

module.exports = AddItemComponent;


But when I trigger the addItem function in the AddItemComponent, the change event of the DataStore in the ListComponent is not triggered. Therefore, how can I synchronize the change event of Flux Store between two components exist on the same hierarchical level?

The solution I can think of is having the DataStore in the TodoComponent (parent component) and send the data and functions as props to the child component. I think, the code will become a bit messy in that way. Is that the only solution to do that?

1 Answer
1

Welcome to React! I recreated your example and your "change" event is firing in ListComponent, but to update the state in a component you should use this.setState(changes) rather than this.state = {changes}. Only use this.state = {} in the constructor to set the initial state. The setState method properly flows through the React lifecycle and causes the component to re-render using the new state. There is an official guide on React's state and lifecycle hooks here.

ListComponent

this.setState(changes)

this.state = {changes}

this.state = {}

setState

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.