Updating React state with Relay - javascript

With Relay, you create a React component as usual:
class TodoApp extends React.Component {
...
}
And then component is wrapped in a Relay container:
export default Relay.createContainer(TodoApp, {
...
});
The Relay container will fetch data using GraphQL and then update the state. This is a higher order component and this state is then passed down as props to its children.
This isn't (or doesn't appear to be) compatible with a flux implementation like Redux. Redux has a single global state object and it too has higher order components that pass props down to presentational components. So I don't see how both the Redux store and Relay containers can coexist currently.
So then how should we update state that doesn't come from the database? How is this state supposed to be managed with Relay?

While I can’t offer you an advice on using them together, technically you can definitely have several higher order components applied one after another:
class TodoApp extends React.Component {
// ...
}
TodoApp = connect(
// ...
)(TodoApp);
TodoApp = Relay.createContainer(TodoApp, {
// ...
});
export default TodoApp;
I’m not sure this makes a lot of sense, but it’s easily doable.

These things are still in discussion and the current state of Redux and Relay may not fit well together if you use a Relay container.
You can join the discussion here

I've done this as follows for a chat application:
The chat component (ChatComponent) is a dumb react component that expects all data to come as props. It also requires the redux dispatch function as a prop so it can dispatch actions when someone wants to send a new message. This is a 'private' component and is wrapped by...
ChatComponentRelay - this renders ChatComponent but is a Relay component which is also connected to the redux store. It uses one of the lifecycle methods (not the constructor) to dispatch the data received via relay into the redux store. This is the component that is used by the rest of the application, and is basically just a proxy to the underlying dumb ChatComponent. It renders ChatComponent passing in all the data in its props from the redux store, and also the redux dispatch function as well.

Related

Connected React component unnecessarily re-renders when parent re-renders

I have a React component that is connected to the redux store via implementation of mapStateToProps. React-redux connect implements a shallow-equality shouldComponentUpdate that should prevent re-renders if props do not change (based on references). However, unless I make my component explicitly pure (using PureComponent), my component re-renders when its parent re-renders. This should not be needed as connect should have implemented shouldComponentUpdate like PureComponent does. Any reason as to why this might be happening? Specifically, how does the implementation of connect differ from PureComponent? Doesn't connect make its wrapped component pure?
connect should have implemented shouldComponentUpdate like PureComponent does
The connect function doesn't do that. PureComponent provides you with shouldComponentUpdate function which is a placeholder where you can put your performance-tweaking code.
coonect takes a different approach and provides 4 functions/placeholders instead. You can use all four or some or none to fine-tune performance. The functions are called:
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual
Doesn't connect make its wrapped component pure?
It leaves it up to you by giving you the option to use the above functions. You can mimic the shallow equality checks done by shouldComponentUpdate.

Hook up API results with Redux in react js

I have a search form that fetches data from a api. This is that first time I am using Redux so please excuse my ignorance.
I am able to display the search results in the sidebar without using redux store.
handleSubmit(event) {
event.preventDefault()
get(`api1`, { maxContentLength: 400 })
.then((res) => {
this.setState({SearchItems: res.data})
})
}
There are few steps
Manually you can do using below methods of store object from redux'
below method will dispatch action to reducer
store.dispatch({type: 'GET_RESULTS' , payload: {}})
store.subscribe will receive all actions, you can register callbacks here.
store.getState() using this method you can access current state
you can find full documentation and examples at https://redux.js.org/basics/store example with redux is here redux with react
for react application you may use react-redux package to integrate redux which comes with Provider component with store property
with this you can import your global store object in your index.js file where you are creating App component.
With provider component set now you can use
And use Connect higher order component inside your react component to integrate redux actions to react component. Connect accepts two functions mapStateToProps and mapDispatchToProps functions as arguments and returns higher order component to which you pass your react component.
mapStateToProps functions as its name accepts global state and returns object with properties which then can be accessed from props, and similarly mapDispatchToProps accepts dispatchers to props. below is the example of react component integrated with redux using react-redux.
here is video tutorial react-redux video

How can you create a functional component that updates on Redux store change?

For my application, I want to create a component who's sole purpose is to update when there is a change to the Redux store.
I have achieved this with a componentDidMount() that checks if the component's state matches the store and sets the state if not.
My solution works, and is suitable enough for the situation, but it seems like a lot of code for a simple function.
How can one achieve the same outcome, a component that updates on Redux store change, using a functional component or a more simple stateful component?
Update: Thanks to the comments below, I have a new working the passes state information as props.
React components renders due to changes in props and state, therefore when you connect your component to Redux store
and supply mapStateToProps, when redux store update the mentioned props that you will return from that function, your component will re-render. You can detect changes via componentWillReciveProps life cycle method.

How should child components in React communicate between each other in a clean and maintainable fashion?

I'm fairly new to React and I'm trying to understand a clean way for child components to communicate with each other.
In a simple component, I know that I can make use of props to pass data to child and callbacks for children to pass data back to parent component.
In a slightly more complex case, when I have multiple children components in a parent component, the communication between the children gets a little confusing. I'm not sure what I should do for children components of the same level to communicate with each other.
In my case, I decided that, maybe, I could use states. So I will have a state value in the parent component, and pass it on the children's props. Similarly, the callback handlers (called from the children component) in the parent component will help to set the states accordingly so that a state value gets passed on from one child to another through React's binding.
And a pseudo code could look something like:
//Inside Parent Component
constructor() {
//initialise state for the child components
this.setState({testList: []});
}
render() {
return (
<div>
<ChildA onSomething={this.onSomethingHandler} testList={this.state.testList} />
<ChildB onSomethingElse={this.onSomethingElseHandler} testList={this.state.testList} />
</div>
);
}
onSomethingHandler(evt):void {
if(blah.blah.blah) this.setState({testList: this.state.testList.splice().push(evt.value)};
}
onSomethingElseHandler(evt):void {
//Some other complex biz logic...
if(blah.blah.blah) this.setState({testList: this.state.testList.splice().push(somethingOtherStuffDueToLogic)};
}
//Inside ChildA Component
export IChildAProps {
onSomething: (evt)=>void
}
render() {
//Do some logic from the value in testList property
if(this.state.testList == blah blah)...
return (
<button onClick={this.props.onSomething({id:321, value:"wassup! I'm ChildA."})}>ChildA</button>
)
}
//Inside ChildB Component
export IChildBProps {
onSomethingElse: (evt)=>void
}
render() {
//Do some logic from the value in testList property
if(this.state.testList == blah blah)...
return (
<button onClick={this.props.onSomething({id:123, value:"yo! I'm ChildB."})}>ChildB</button>
)
}
At this point, I'm starting to wonder if the logic in that 2 handler methods, namely onSomethingHandler() and onSomethingElseHandler() in the Parent component, should actually be resided inside the child components themselves? I thought of this because those logic look like something the child component should be handling on their own to serve their purpose. The parent component shouldn't do it for them or it might just grow messy. But I've no choice because of how I'm handling their communication. Apart from this, I also created a new state simply just to allow them to communicate.
So far, this is still relatively manageable. But in my own experiment, it has got to a stage where I've children component nested inside another children components that need to communicate across other children components of the same (or sometimes different) level. Using states for communication also meant that I have many states all over the place, which doesn't look like a good idea to me. And the parent components ended up with tons of messy callback handler methods to manage all that propagation of data up and down the component tree.
The situation is so messy that I can at most illustrate it as something like so:
And you can see in the above illustration, ChildB ended up having yet another state just to help passing that information between its children components.
I'm sure I'm missing something that I should know about React. The callbacks I'm having in the parent components seem a little too much just to handle data propagation. How should I really organise the communication of children components in a clean and maintainable way?
Every React programmer hits this wall at some point in time. I did too. The answer is to use Redux for state management. You have experienced how tedious it is to use React's native state.
Redux is a state management mechanism which can be used in conjunction with React. So you won't be using React's state, instead you will use Redux.
Redux provides a single store, where the state of entire application is stored. You can access the state in your components using connect() method.
But there is a caveat. Not all of the react components are connected to the Redux store. There are two types of components-
Smart/connected components: Connected to redux store
Dumb components: Dependent on connected components
The idea is to pass the state from redux store to Connected components via React's props. The connected components can directly consume state from the store. The dumb components are not directly connected to the redux store. The connected components also pass the state to the dumb components via props. So you see, React's state is bypassed altogether. Now, if you want to change the state, following events must happen-
An event is fired from the smart/dumb component.
Actions are dispatched to the store
Reducers create a new state according to the actions.
A new state will be stored in the store.
Store will return new state to the connected components via connect() through props
Dumb components will receive new state from connected components through props
What are actions and reducers?
Actions are nothing but javascript objects that describe how to change the state.
Reducer is a "pure" function which builds and returns the new state tree according to the action dispatched to the store.
Redux - http://redux.js.org/
Redux-thunk - https://github.com/gaearon/redux-thunk
Redux-saga - https://github.com/yelouafi/redux-saga
Most fashion way is using Redux.js (or flux.js) to matain your child components state.
http://redux.js.org/
If you don't like invoke third party js. You can use refs property:
https://facebook.github.io/react/docs/more-about-refs.html
We can use the react context API,
Context provides a way to pass data through the component tree without having to pass props down manually at every level
Also, note that Mark Erikson has mentioned in his blog,
Yes, the new context API is going to be great for passing down data to deeply nested components - that's exactly what it was designed for.
If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place.
Context also doesn't give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables.
To handle scenarios you mentioned, context API is a good option and you don't have to use additional libraries for that.

How do components interact in Redux + ReactJS?

I am interested, how do ReactJS components interact with each other, when used in couple with Redux?
From what I've seen in the todoApp tutorial, I created a diagram how I understand that interaction (this may be totally incorrect and this is why am I asking this question):
On this diagram one can see five basic entities: Provider, Store, Container, MainComponent and Component.
For simplicity, let's call all this system an application, which, by fact, consists of one compound component, MainComponent and its children.
Provider is a component, encapsulating both Store and Container instances.
Container is an enhanced version of MainComponent, powered with Redux' dispatch() function and containing rafinated (filtered) data from the currentState of the Store instance.
Store is just a holder of currentState, the actual application' state.
MainComponent is, as described before, the central component of an application, made of Component instances (optionally).
Now, there are four Redux functions on this diagram, namely connect, selector, reducer and dispatch.
selector filters the state, giving the data which is required by MainComponent and throwing away everything else.
connect takes selector function and MainComponent class and provides the new, Container class, which then is used in Provider component to fill the MainComponent with the data.
reducer takes the current application' state and a dispatched action (which has an aim to change the current state) and gives a new, changed application' state.
dispatch is the function, joining all those previous ones together. This one "changes" the state of the MainComponent. It takes an action, then hits Store for the current application' state. The fetched state and action are passed to the reducer function, which gives the new application state. This new state is stored as the currentState inside the Store and then is passed to the selector function, which filters the state, taking only what is needed by MainComponent and then updates the props for MainComponent and makes it to re-render itself.
So is this simplified data flow/interaction diagram correct? Or do I have some fundamental misunderstanding?
Thanks!

Categories