I'm trying to differentiate different redux state changes and saw this github solution: Redux-watch In order to the watch function you're supposed to provide the redux store which can't figure out how to do. I'm passing the store down to this component through a provider for reference.
If you need access to the store state in a component, you should be using the useSelector hook or the connect higher-order component. Don't try to set up store subscriptions yourself in components - React-Redux does that for you already.
Related
I am creating a React components library that exports a TypeScript function that another app can use. In that function, I need to retrieve some information from the app's store. How can I do this?
I cannot import the store and do store.getState() since I wouldn't know where the app's store is. Is there a way I can use connect() to do it?
If it's possible to design your function as a custom React hook, then you can use useSelector() inside it.
If it's not feasible, than shaping arguments to expect store been passed in - is a way. Especially if you are going to target older versions of react-redux, without useSelector
I am making a React Native app and I need the user data (fetched from firebase database) to be available right after the first screen and in many other screens.
As it is complete user object data, I do not think passing it via the navigator props is suitable. So I am searching for alternatives.
Can someone help ?
The best way to store and share global data is Context API or Global Context .
This new API solves one major problem–prop drilling. Prop drilling is the processing of getting data from component A to component Z by passing it through multiple layers of intermediary React components. The component will receive props indirectly . Context provides a way to pass data through the component tree without having to pass props down manually at every level.
To create a context, we use React.createContext which creates a context object. You can pass in anything as an argument to React.createContext.
import React from "react";
const YourContext = React.createContext("value");
To make this context available to all our React components, we have to use a Provider.
Every context object comes with a Provider React component that allows consuming components to subscribe to context changes. It is the provider that allows the context to be consumed by other components.
In order to create a provider, we have to import our Context.
I am new in react-hook-form, and my question, that when I wrap my whole application with FormProvider can I access the state like the react context API, or the redux provider or this component is just for inject the useform methods into the context for calling everywhere?
My case is that I have a react-native application. I wrapped my app into the FormProvider in the App.tsx. I have a form screen where I have to add some data from another screen (react-native-screens). So I tried to call getValues and setValue on the new screen but I get undefined as a result of the getValues method.
Should I create custom react context with useEffect to update the form state or there is chance to solve this with useFormContext hook?
Hello first you don't need react-hook-form as a global state supplier . use redux it's much simpler as to your appProvider you simply import Provider from 'react-redux' then pass the store as a prop then configure your store to take injectable states from future containers . react-hook-forms main roll is meant to handle forms : check their usage https://react-hook-form.com . i use it mainly in authentification containers to control the flow of data that is to be sent to the main store. . i hope this answer gives you some clarity .
If I understood correctly ,in order to accessing your states anywhere in functional components by redux you are able to use useSelector for getting data and useDispatch for dispatching data. Also in the react context you capable of to creating your custom hook for easier accessing to your states by useContext or directly use that and for setting your states you can use useReducer (better way) or set in the context.
React hooks
Redux hooks
We need to save a value globally so we could access it from any component.
How can we do it properly?
I have tried it in many ways
1- make a component and store value in it. and import from other components where you need to use it
I have also tried props and state concept that would work in the parent-child flow of data.
-- Use Redux for easier state management for application-level state
-- use react store for component level state management
If you don't want to use an external library you can just use the context of react.
https://reactjs.org/docs/context.html
But when your application scales redux is probably the best way to do it
You'll want to use a state manager like Redux or Mobx to manage your state outside of their component scope.
I have a react native project and I am using redux actions and reducers to handle my store.
I have a smart connected component and I call my actions through dispatch in componentWillMount() and then I have mapStateToProps and I map the data I get from my store to props.
Problem is the only way to check if the props are changed, is by putting it inside render function. In my case I want to navigate to another page if I get props filled with some data. It all works fine but I get warning from React that its anti pattern. Is there any other way of doing this? Am I doing it right?
You should implement the method componentWillReceiveProps instead of comparing the values in the render
Another (preferable) approach would be the action responsible to update the values, do the navigation (or dispatch another actions that would do the navigation stuff). Check redux-thunk