I have only seen redux being used hand in hand with React (or I suppose other popular frameworks) and each state change is related to a UI change. I was thinking if I could use redux totally separated from a React component to achieve event driven programming. But React gives me the useEffect hook to listen to variable changes.
So does redux provides an event listener out of the box ?
I want to keep the useSelector functionality to get the desired state variable, but then I want to replace useEffect with another event listener on this variable in order to perform some logic or dispatch another action. I don't need to render something, just to apply certain code depending on the state of the app. Can this be done only in redux environment ?
You can totally do that!
If you only want to listen for state changes, you can use store.addListener. If you want to observer actions and the according before/after state, you can write your own middleware.
Related
My application depends mainly on one async method: my get-all-images function. And my app have like some components that will affect this method (ex: there's a search button on header, a add component, and a delete component). And I want to know what's the best way to make this function run again. ContextAPI?
This a is schetch of my app:
I think if the app is simple, it would be faster to do with useContext React Hook. You just put your state and setState in there, and then, get them in whatever component you need. But when your application gets bigger, it's getting hard to track the state and where it is updating. For that reason, there is Redux.
Usually when you have this scenario, a common approach is using what you said, a React ContextAPI, with this you can correlate the components into the main state aid avoiding multiple re-renders with passing props.
Another approach, since your project need to have this "brain state" is to use solutions like recoil , redux or mobx to create a flux architecture inside of it and manage better how the components handle each state.
**Is it OK to Using a component state for just to handling form data, while the main data and other stuff of the application will be stored in the Redux store?
I don't want to use redux-form instead manually dispatch it to the reducers**
Redux comes into the picture when we want to manage the state across different component. It provides a centralize store where state of all the components are managed.
When talking about forms, in most cases form data is only limited to the component is which is being used. So, in that type of scenario there is no need to link them to centralized store using redux. A simple way is to store them in the component state and get it processed. Afterwards, you can store the output of that in redux store according to your needs.
It is okay to do that. You can keep a local state in the component. state = {} in class components, const [localState, setLocalState] = useState() for functional components.
Or you can use custom hooks for handling your local state needs. Check out useInput or useForm custom hooks that are developed by the community.
Yes of course. Some things go best in component state, some go best in a parent component, some go in Context, and some go in Redux. There is little use in putting everything in Redux, it just causes a lot of boilerplate and every component tries to update when the store changes.
You put things in Redux when different components that are at different places in the HTML tree use the same data, and it changes during the app's lifetime (things like the user's language don't change often and go in Context). You use it when you want to store your app's state to restore it later (which exact menus are currently open or closed is usually not that important) and when you want to keep track of state changing using the Redux dev tools.
Currently, I'm working on a project using events to update other components that listen to these events and trying to convert these events to Redux actions.
An example when the user login there are components listen to this event and call an API to update its state, The events were firing based on if the component exists or not so with Redux I have to check if the props got changed or not inside the component using componentWillupdate and from there I call the API.
I need to know if this is the best solution for doing things similar or there is another plugin I can use?
I would refactor the code removing the emit/listen to event pattern to something more close to Redux's architecture.
The components that emit events should call action creators. These action creators can call REST API or do other async stuff (using, for example, redux-thunk) and generate zero, one or more actions to update Redux's state.
On the other end, the components that listen to events have to receive in input the new data from Redux's state and update accordingly. A simple component should change its behavior when its props change, in other words, when its state change. In this case, the component's state is a subset of data stored inside Redux and updated by the reducers when new actions are dispatched.
I've been learning Redux and a part I'm unclear of is, how do I make a determination between using react state vs redux store and then dispatching actions. from my reading so far it looks like I could use React state in place of Redux store and still get things done. I understand the separation of concerns with using Redux store and just having 1 container component and the rest of it as stateless component but how do I make the determination of when to use React state Vs redux store is not very clear to me. Can someone please help?
Thanks!
If the state doesn't need to be shared with other components, or the state doesn't need to be keep when the component is unmounted, then you can just put it in the component's state.
You can think that the Redux store is the database of front-end, if you have something like product data fetched from an API, then the Redux store is the right place; if you have a dropdown component, which takes a isOpen prop, then the parent of that dropdown can just keep dropdownIsOpen as a component state.
For more information, here is the answer from Dan: https://github.com/reactjs/redux/issues/1287
Also you said
only 1 container component and the rest of it as stateless component
This is incorrect. You can have several container components. A container component can also contain another container component.
From book:
First of all, we should always keep in mind that only the minimal
amount of data needed should be put into the state. For example, if we
have to change a label when a button is clicked we should not store
the text of the label, but we should only save a Boolean flag that
tells us if the button has been clicked or not. Secondly, we should
add to the state only the values that we want to update when an event
happens, and for which we want to make the component re-render.
Another way to figure out whether the state is the right place to
store information is to check if the data we are persisting is needed
outside the component itself or by its children. If multiple
components need to keep track of the same information, we should
consider using a state manager like Redux at the application level.
There are a few things that need to be grasp
State of component: If you want to keep state-specific to your HOC then use state. Now in the function component, we use useState.
State of redux: If you want to share data throughout the application use redux state.
Store of redux: It's nothing but a database for the redux library. In the case of redux, we can have only one store. To use multiple stores we can use Flux but it will make things more complicated.
You're absolutely right. Redux (and flux architecture in general) are only formalism tools to help for building large apps. They're not necessary at all.
There's actually an interesting post called You might not need redux by Dan Abramov, the creator of redux that might give you a better answer than I do: https://medium.com/#dan_abramov/you-might-not-need-redux-be46360cf367#.7093fm1z8
If state is needed only for that particular component then prefer to use react state.
For example using state for UI actions
If any state you want to use across the component/project then go with redux state.
For example API response data etc
For detail understanding refer this link
https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/
I have a react component and I want to perform an action if it has focus for 2 seconds. In pure react I had internal state where I could handle this.
What is the approperate way to do it using Redux?
Use React for ephemeral state that doesn't matter to the app globally
and doesn't mutate in complex ways. For example, a toggle in some UI
element, a form input state. Use Redux for state that matters globally
or is mutated in complex ways. For example, cached users, or a post
draft.
Sometimes you'll want to move from Redux state to React state (when
storing something in Redux gets awkward) or the other way around (when
more components need to have access to some state that used to be
local).
The rule of thumb is: do whatever is less awkward.
https://github.com/reactjs/redux/issues/1287
This is the answer by Dan Abramov creator of Redux.
In your case, I think it's OK to use React component state.