I am just curious if there is a way to access the global state in redux from my component without using mapStateToProps.
Thanks.
you can make use of the useSelector hook from the react-redux library to access the store without mapping it to your props.
you can use:
mapDispatchToProps
mergeProps (this one will give you what you want)
options
in the connect function provided by react-redux
Related
Okay I am using redux for state management in my react app. Now the question I have is, would it be all right to use useState knowing that I would only be using that state in one component only( i.e. the component that it was created in). It doesn't need to be passed, to other components(not even its children). So can I use useState in between of redux? I need to use redux btw.
You should use local state i.e. useState as much as possible. Redux state should be the last resort. Only use Redux state if you absolutely need to pass data from one end of the application all the way to another end. This is both good practice for tight coupling and good performance.
Yes, for sure. There's no reason to use your Redux state for local state.
I was reading about React-Redux provider in the library docs and i faced 'context instance' prop as one prop for the provider, i couldn't really understand what it means:
context You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in runtime error:
Is it the whole store data?? the destination component of data??
Is it the whole store data?? the destination component of data??
No, the context props is a react context instance, which allow you using store directly in its consumer instead of through connect, useSelector or useStore. As its doc, you can either create your custom context or using redux's ReactReduxContext
I'm currently implementing global state handling in React using the Context API in combination with the useReducer hook.
I have two concerns regarding mutability:
When updating state in my reducers, do I need to e.g use Lodash's cloneDeep function to sever the reference between the objects going into my reducer and the stored state?
Is it possible to ruin the global state by manually mutating it outside reducers, or will it behave like "normal React state" in the sense that manual mutations will get overwritten during the next update cycle?
For reference: docs
Both useState and useReducer give you the exact value reference that you saved (either by calling someSetter(newValue), or returning a value from the reducer function).
In either case, manually mutating the value is wrong. In particular, both of them will bail out of updates if you return the identical reference as last time, so you should always update values immutably.
I would give this a read.
https://kentcdodds.com/blog/how-to-use-react-context-effectively
This is a really good guide of how to use react context in conjunction with useReducer the right way.
Let me know if it helps.
is there a reason people always seem to define these functions at the bottom of every component they are needed?
when ever I create a react/redux project I put these in a /mappingFunctions directory and then import them into the files I need them, thus declaring the functions just once. obviously means the functions include more than necessary but it means they are in just one place rather than defining them a million times.
just wondering why this is not the standard?
Each component/container may need to access different set of variables from redux store and different set of actions. So mapStateToProps and mapDispatchToProps are defined individually for all those components that need to interact with Redux store.
Also you don't need to use mapStateToProps, maDispatchToProps for each component. You can have a balance between passing props down or connecting each component to Redux store.
Check Use Connect or pass data as props to children for more details
Because the state and the actions passed to components are generally different
mapStateToProps - this is callback called by Redux when some part of the state is updated. It is used to update map Redux store changes to properties of your component. Each of your components is most probably interested in different parts of Redux store state. Your container components doesn't need to implement this if they don't need to be updated based on Redux store state updates.
maDispatchToProps - this is callback used to create action closures connected to redux via dispatch. This way Redux store is aware of actions triggered by your component and can update its state accordingly. Your container component will use only handful of actions. It can happen that container component doesn't need to connect any actions, so you would not need to implement this.
If you find yourself duplicating same mapStateToProps/maDispatchToProps across various container components, you should probably reuse same container component on various places of your app and remove such code duplication this way.
I'm using react-redux with the components. It passes dispatch as a prop into my top level component, but i'm having trouble accessing it from deeply nested (and some other more complexly mounted) components. What is the best way to access dispatch from any component? Do I need to pass it manually as a prop to every component I'd like to use it in?
You can use connect on components even if they are bellow some already connected components.
If you don't want to use connect everywhere around you can just explicitly import store and dispatch on it: http://redux.js.org/docs/basics/Store.html