Scenario: I have an react app which has its state in flux store (async load), passing data down to Root component which is passing data to its children and so on.
now: text input field, nested somewhere deep down in node tree, has its initial value done in getInitialState from a prop (the prop has been passed down), and on onChange event its state is set to typed value. So far book example.
Now let's 'submit' the form, action is triggered, ajax call has been made, data came back changed, passed to the store which emits event to Root component, the node tree gets re-rendered again, BUT of course getInitialState is not triggered again, and the field still has the last typed in value.
I don't think I want to initiate the whole action-store-root-children-reRender loop on every single key stroke, right?
Question: How do I get the input's state to be fresh from the passed prop (the store one)
THOUGHT: Hmm, I can actually tell when I'm initiating re-render from the ROOT, by setting a store 'flag' in ROOT's componentWillUpdate() then setting it back in componentDidUpdate() - then all the child components can know if it is ROOT intent to re-render or just a parent non-store initiated change.
Keep the form's values in the store instead, and don't using any local component state at all. When the form is edited trigger actions to update the store and re-render the app.
First of all what you are doing is an antipattern. State should not be set equal to props. Your props should not be state.
The React docs are pretty clear on updating props.
Check out this link: https://facebook.github.io/react/docs/component-specs.html
componentWillReceiveProps(object nextProps)
You should think about implementing this lifecyclemethod it will help you to be aware of prop changes.
But please think about seperating props and state - there is a reason why React Framework has both. But that is a different topic.
EDIT1:
If you want to update your stores state then call a flux action that referes to the corresponding store and pass in the props as payload inside of the lifecyclemethod above.
Hope this helped.
Related
My current understanding of mapStateToProps() is to map the currently set Redux store to any prop you want set within a component. I also know that props are variables that are passed to the component andstate` within the component is just a concurrent group of variables that are being utilized.
What is confusing me is that I am seeing on many sites/docs that you should never change the props.. Surely mapStateToProps() is physically changing the components props and goes against this ethos?
Here's a scenario, say we are wanting to show a loading symbol while some backend process is being run, I can create a dispatch that will set IS_LOADING= True, if I wanted to apply this value to show the loader in my component I would apply this to a prop loading in the component, however when the component first loads wouldn't it error on running mapStateToProps() as state.loading does not exist yet?
What is confusing me is that I am seeing on many sites/docs that you should never change the props
That means you should not change props from inside component. The idea is that parent creates props for the child. If props change components rerenders.
however when the component first loads wouldn't it error on running mapStateToProps() as state.loading does not exist yet?
It should not happen if you configure your store properly. Store is created on the top level, so when your child component initializes store is already present. So you have to configure your initial state properly. E. g. set initial isLoading value to false.
I am new to React and a bit struggling with state in React and how and where we need to use it. So far, I found out that "If modifying a piece of data does not visually change the component, that data shouldn’t go into state". So, state is all about re-rendering the UI(I hope I am correct). So, the question I want to ask is Is it true that we use state only for re-rendering the UI only?, nothing else and nothing more?
You can use state in your class components. State is like private data of your component that may change by action made by user.
State is immutable. This means you can not change state directly in following way this.state.someVal = "smth". The only way to change state is using this.setState() method.
When you change state value React automatically re-renders your component without refreshing the page. In other words React.js reacts to your changes
State is an object that is directly tied to rendering the component. The reason why you can't change State directly with say this.state.foo='bar' is that React would have no way of knowing that it needed to re-render the component if you did that. Thus there is a setState method to change the state, which under the hood calls the render function of your component.
Therefore, if you have some data that has nothing to do with rendering the component, you don't want to put it into state, as setting its value will cause unnecessary renders to occur. If you're using class components, you can just put that data on the class directly: this.foo='bar'.
Basically yes! Two examples might be: A - holding a list of items (shopping list, or todo items) that are rendered directly to the UI, that are subject to change as the user adds and removes items. B - a value that determines whether or not you want something to show up on your UI, for example, you might have a state value called 'showNavbar' that is either true or false, depending on whether you want the user to see a navigation bar.
I hope that helps make sense of it in a basic way :)
We use the state for rendering the UI.
Also, I think the State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
For this, We use the 'setState' method.
setState() is the only legitimate way to update state after the initial state setup
I know that it is possible to re-render only one component (instead of whole DOM) using shouldComponentUpdate(), but is it possible to only re-render one PROP of one component? In one instance in my app I do not want the entire component to update, but only a specific prop that is being changed.
You probably can't do that because that's not how it's supposed to work. The component is updated in order to reflect all changes made to its state and props. The best way to get around this would be to just not update the props being passed by the parent component.
Alternatively, you could also use the state to hold the values you don't want to be updated, and set these values in the constructor of the component.
I have been using redux .. i am changing state tree using using redux actions ...
sometimes updating the state does not refresh the component .. i have to force update by this.forceUpdate() .. why is this happening? Under what condition does this happen.. usually updating state tree using an action automatically refreshes the component but sometimes it does not.. another question is that what if the state change needs to re-render a different component ?? how to i force update other components from another component ??
Are you sure what your return new object from your reducers?
If your return the same object (only mutated) redux does not understand what data has changed.
If you need rerender component when data change that that component should be dependent on these data. forceUpdate is a really bad practice.
Sometimes it's not obvious: where I should keep state of React view, i.e. active tab, selected option, toggler value, is input validated flag?
Actually there are two options:
Throw an action and keep that data in store
Keep that data as view's state
Which of them is better? Are stores intended only for data from server?
My considerations:
That's bad to keep that data in store, because that lead to chain of actions. Example: you need to download data on tab selection - so you trigger an action NEW_TAB_SELECTED and from the store which handle it trigger a new action DOWLOAD_TAB_DATA.
Keeping data in view allow to avoid the first action (NEW_TAB_SELECTED) and avoid action chains. But how to keep selected tab if I want to leave this view?
Things that should be kept in the component's state are things which only affect that component.
So, for example, if you have a component which opens to reveal more content then the isOpen flag can be kept in state because it's internal to the component.
If the information is not part of the component (such as the text of a message and whether the message has been read) then it should be kept in a store and circulated through the app as needed.
Changing the state of a component will cause it to redraw, so try to keep state to the minimal possible representation of its state, and only store those properties in this.state.
Therefore, from what I can gather from your question, I'd suggest keeping active tab, selected option, toggler value and whether the input is validated in this.state. They are all properties of the component but don't affect any other components. I'd keep the data which populates the views in a store. I'd keep the flags which indicate the state of the view in this.state.
Hope that helps.