How to get latest updated react component state (after all the state changes are done) and put the same object in Redux.
Get the latest state and dispatch an action (with a copy of current state) only once instead of dispatching the same action from different methods where state is getting altered ?
Is there any efficient way to achieve this ?
First If your state doesn't need multiple pages then no need to store the state in the redux, use local state.
But if you want to use redux and want latest state, then if you want this state in the stateless component(functional) then you can use useSelector redux hook for the latest data, and if you want the state in the stateful component then use mapStateToProps.
useful links:
for hooks: https://react-redux.js.org/api/hooks#useselector
for mapStateToProps: https://react-redux.js.org/using-react-redux/connect-mapstate#defining-mapstatetoprops
Related
Let’s say I don’t use Redux (and therefore no Redux Thunk involved) in my application, and instead, I manage my state with the useReducer hook.
The issue is that in the action creator, I want to access the state itself. Does the only solution is to give the state itself as a parameter to the action creator, or is there a way to get the same benefits of the Redux Thunk, and be able to access the state itself through some getState() function?
Create a reducer that accepts state & action and returns a new state based on the action (same as redux).
When you are calling 'useReducer' you should pass it the reducer you've built and the initial state.
You will get back the state and dispatcher (the function that will use you to update the state - same as redux).
Please find the following articles explain how to achieve it shortly and simply:
https://www.peanutbutterjavascript.com/roll-your-own-redux-with-usecontext-usereducer/?fbclid=IwAR2je-sa5UW_5elE8UlkcUfZEzYjiwBO44P4smsn3NPznUiMS3EZEKsILEw
https://medium.com/#martin.crabtree/react-creating-a-redux-like-global-state-with-the-usecontext-and-usereducer-hooks-89aa2b27dbc5
What would be the best way, while following React best practices, to define globals that changes according to props provided by a redux state.
For example, let's say I have a metric or imperial toggle value that's dispatched into a persisted redux state. Is it possible to call for a constant that changes its value based on the toggle without providing the current state of the toggle by passing it via props?
My current implementation is doing
globals.distance(this.props.metric)
where this.props.metric is mapped from the redux state to the component's props. I want to somehow implement subscription to the redux state from within the globals file, so I can just do constants.distance. I've tried importing getState() as well as subscribing to changes in the redux state, but the problems there is that getState() only runs once when the file gets loaded, and I can't seem export constants subscribed to the state since the function returns an unsubscribe function. I can also create a Component and subscribe that to the redux state, but I can't seem to find an easy way to export constants from within a Component state either.
Well, I couldn't find a solution I liked, so I made my own. It's a thin wrapper to connect functions to the Redux store and return a value.
I am very very new to React-Redux and encountered a method called mapstatetoprops.
However why is redux state not mapped to react state ? Why is it mapped to props instead ?
In React, state belongs to the component while props are passed to the component from it's parent. mapStateToProps() is a function that is used inside connect() to pass data from the Redux store to a component.
The difference between state and props: https://codeburst.io/react-state-vs-props-explained-51beebd73b21
If you want to use data from the Redux store in a component's state, the component would first need to receive it as a prop. You would then be able to map it to the component's state in getDerivedStateFromProps. https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
When you derive state from props this way, updating the component's state does not change the Redux state.
The primary reason (as I see it):
"Dumb" components deal only with properties, not state.
One motivation for "dumb" components is that they're trivial to test: all you need to do is pass in props. This means that regardless of where the props come from the only thing you're testing is that they do the Right Thing with whatever props they're given.
Mapping the redux store to properties reinforces this notion. Once you introduce component state you then have to play more (some easy) games to test the component, but it's not as straight-forward as a pure component.
Cause this is the Redux workflow.
When without redux you use local state (component state) and passes data through parent to children, this makes data sharing very difficult when you have more components.
ComponentOne have data to be passed to component 4:
ComponentOne -> ComponentTwo -> ComponentThree -> ComponentFour
With Redux, you have a store, but can't use is as a object (getters and setters), you map it's contents to the components that needs each property.
Redux scenario:
store {userName: "user", otherData...}
Dashboard
function mapStateToProps(state) {
return {
userName : state.userName
}
This way the component will listen to userName changes, but only can change data in the store through the mapDispatchToProps. This way, the Single Source of Truth React principle is assured.
I have an react component and inside it I have state called "user" with some data, I need this state in other component . please how do this with redux ?
If user is part of the component's local state, and the other component is not nested inside it, then you need to move that piece of information out of local state and into Redux's store state.
I understand that mapstatetoprops is mapping our Redux application state to our React component props, but i don't quite understand what's happening behind the scenes when a reducer returns a new state - how does that trigger a re-rendering of components that have props mapped to the application level state?
In pure React, setState triggers a re-render correct? Is something similar (or the same thing) happening via Redux?
Both Redux and React-Redux employ shallow equality checking.
In particular:
Redux's combineReducers utility shallowly checks for reference changes caused by the reducers that it calls.
React-Redux's connect method generates components that shallowly check reference changes to the root state, and the return values from the mapStateToProps function to see if the wrapped components actually need to re-render. Such shallow checking requires immutability to function correctly.
Well the whole point when you create a component using the redux "connect" function, is that behind the scenes you get connected to the redux state, and have a listener for the state changes.
So you create a simple component that gets his values from props, but those props are got from the state using the connect with "mapStateToProps".
Never dived in to the redux-react connect function, but if you want you can surely go ahead and see what it does exactly.
But the main point is what I explained above.