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.
Related
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.
Let's say I have a music component connected to the "play" prop in the redux store.
When "play" is updated, I would like to update the playback status (play, pause, etc) accordingly. However, this does not influence how the component looks. So I'm wondering where to perform the update actions?
I was using componentWillReceiveProps to control the playback when the prop is updated, it works but apparently that is incorrect use according to the React team, and the method will be deprecated.
You need to dispatch an action with the selected playback status within the onClick function that is passed through a reducer and updates the state of the store. The component, if connected properly to the store using the connect function in the react-redux library, will automatically update the rendering of the component.
I'm new to React and I'm trying to figure out the best way to request information from the server based on the URL. I'm using Redux and React Router v4.
Let's say I have a route /foo/:id, and a component Foo that will render something based on id. However Foo needs some server data related to id to do so. I believe the way to accomplish this would be to use mapDispatchToProps to create a function that takes id as input, does some async work, dispatches an action, and ultimately updates the redux state.
My question is: where is the most appropriate place to invoke the dispatch? In this scenario, there's no form submission or button click to kick things off. Originally I was thinking of including a check for the id data in render() and fetching if it was not populated, but this felt wrong due to the side effects.
You can do it in componentDidMount of the Foo component, similar to this example from the Redux GitHub project.
Your intuition is right that render is not a good place to do so. Most people do it in the componentDidMount lifecycle method of the component.
On a relevant note, you will also want to do fetching also in the componentWillReceiveProps method like what they did here. Reason being if your user navigated from foo/1/ to foo/2/, the component is already on the screen and will not be mounted again, hence componentDidMount will not be called again. The fetching for the second user will be done in the componentWillReceiveProps method.
i think the best way to do the dispatch inside the componentWillReceiveProps() which would help you fetch some data before the component renders
It seems your use case is well-captured by the react-refetch package which you can find here. It provides a higher-order component that allows you to specify dependencies at specific API endpoints and then resolves them when a new instance of your component is created.
Importantly it injects the data into your components props using a synchronous abstraction of a promise called a PromiseState. This will allow you to conditionally render your component depending on whether the data is say pending, fulfilled, rejected, etc.
This is not attached in any way to Redux, it skips that layer entirely, so do keep it in mind that the response is directly injected into the component and does not go through your redux store's state.
I am making api calls to my server and not sure if whether to do it in my component or action creator. The action creator is meant to update application state, but this api call will NOT add anything to the redux state. Do I still use an action creator even if I am not changing the application state?
No. This is independent from Redux.
Just make a call in a regular component or even in a helper/service class.
Actions in redux are only for updating the store.
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