Comments (11)
when I have to update my property
What do you mean by this? Are you updating some piece of UI? Or another variable in your component?
from redux-react-hook.
@ianobermiller
yes, I'm updating UI.
from redux-react-hook.
@ianobermiller
here is the simplified code which might clarify my intents
const mapState = useCallback( state => { //...code to read node from the store const value = getValue(node.path)(state); return { value: value, } } ,[ getValue(node.path)(store.getState()) ] );
from redux-react-hook.
@ianobermiller
in the application I have different inputs as custom components who constantly speaking to the server via persistent connection. So they send their input values and server processes them and respond with validation or calculation results as a commands which then dispatched to the store and updates those values matching their path/key. So I need to react on those values updates coming from the server and dispatched to redux, but I can't because useCallback is limited to the arguments from outside...
In other words I kinda don't understand the situation we limiting to read store updates by the arguments which might not belong to the store at all. I was thinking about the store like an observable collection to which we subscribe for updates receiving, but seems like now it is not.
from redux-react-hook.
Can you create a simple codesandbox demonstrating the issue? Another way to explain this that might help is showing how you would solve this with react-redux.
from redux-react-hook.
@ianobermiller
Thanks for your response Ian.
I eventually found the work around. But it still looks a little bit weird/awkward to use useState to sort that issue.
Please see updated example. Mostly (Input.tsx)
from redux-react-hook.
I'm still not really sure what you want to accomplish. Copying from Input.tsx:
const [localStateValue, setLocalStateValue] = useState("");
useMappedState(
useCallback(
reduxStoreState => {
const reduxStoreValue = reduxStoreState.processedValue;
if (localStateValue.value !== reduxStoreValue.value) {
setLocalStateValue(reduxStoreValue);
}
},
[localStateValue.value] // I wish I can have an access to reduxStoreState.processedValue here
//to pass it's value as a dependency
)
);
useMappedState
returns the value you should be using directly, and takes care of not re-rendering if that value hasn't changed. Your code could be as simple as:
const localStateValue = useMappedState(useCallback(
reduxStoreState => reduxStoreState.processedValue,
[],
));
from redux-react-hook.
How to pass values from redux store to useCallback as dependency arguments
It doesn't really make sense to do this -- the entire point of the callback is to select something from the store, so how could the callback itself be based on the store values? You can certainly select things from the store with useMappedState
and then put them in the dependency array of another hook.
I'm going to close right now, but I will reopen if our discussion turns up something actionable.
from redux-react-hook.
I'm still not really sure what you want to accomplish. Copying from Input.tsx:
const [localStateValue, setLocalStateValue] = useState(""); useMappedState( useCallback( reduxStoreState => { const reduxStoreValue = reduxStoreState.processedValue; if (localStateValue.value !== reduxStoreValue.value) { setLocalStateValue(reduxStoreValue); } }, [localStateValue.value] // I wish I can have an access to reduxStoreState.processedValue here //to pass it's value as a dependency ) );
useMappedState
returns the value you should be using directly, and takes care of not re-rendering if that value hasn't changed. Your code could be as simple as:const localStateValue = useMappedState(useCallback( reduxStoreState => reduxStoreState.processedValue, [], ));
Hi Ian, thanks! Your example is working well, I tried similar thing before, but
seems like there was a bug in my sendbox, the input value was not changing, and I mistakenly thought that this happens because we supply an empty array as a dependency argument to the useCallback.
from redux-react-hook.
@ianobermiller
Just want to clarify one last thing, that "connect HOC" from "react-redux" works more precise, because it composes in right direction.
It happens that in our app we remove the parent node from the store to notify the application that edit form must be closed. So in JSX we check if the node does not exist we render null. That makes "react" to remove components tree from the DOM, and because "connect HOC" is a part of that tree it also safely unsubscribes from the store (I hope) , and does not react on store updates coused by parent node removal.
This works differently for hooks. Because hooks do not participate in the components composition (not composed/nested into components tree, like "connect HOC") they're reacting to the store update earlier than components removal happened. That leads to one more redundant cycle and extra problem, like in our case we need to check if the parent exists or make a safer code, just not to get null pointer exception.
I have updated, the previous example, just to clarify that situation.
Please feel free to share your opinion on that!
Is there another way how to eliminate this redundant callback?
from redux-react-hook.
Sounds like you may be referring to top-down data flow, which this hook does not implement: https://github.com/facebookincubator/redux-react-hook#how-does-this-compare-to-react-redux
from redux-react-hook.
Related Issues (20)
- do you have multiple reducers example? HOT 1
- how to redux hooks update on an unmounted component HOT 1
- Reducing components rerenders HOT 7
- use useEffect instead of useLayoutEffect HOT 8
- testing with jest HOT 2
- Flow error: Redundant argument. This argument doesn't change any lint settings. HOT 3
- question about re-render guarantee mentioned in docs HOT 1
- sometime async dispatch will not update by finally HOT 2
- mapState function cannot return a function ? HOT 4
- How to chain actions? HOT 2
- useMappedState returns incorrect value HOT 3
- Custom comparator
- Missing equality check in flowtype HOT 1
- crazy thought: useDispatch() returns wrapper that invokes dispatch() on Redux store as well as any number of React.useReducer() state mutators HOT 6
- ts error in example HOT 2
- another crazy thought: reimplementation of Redux reselect.. built on top of this library HOT 5
- Performance issues HOT 2
- how to combine reducer HOT 1
- Would it be possible to use redux-form with StoreContext.Provider from redux-react-hook? HOT 1
- [need help] Does it support aysnc reducer? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-react-hook.