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.
Related
I have a simple component that uses Redux and Redux Sagas. The action is dispatched when a button is clicked and it changes the state value asynchronously.
I am creating a storybook component for this and I have already set up a decorator that uses the Provider(the store has been configured).
The storybook component gets the desired state value, however, it fails to dispatch the action.
I am unable to figure out what is the reason behind this. I am new to Storybook, any idea why the action is not dispatching?
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 am very confused recently.
When I write redux, if I have to call api ,I will put an action to update reducer, the component just render the data from props
But recently I see my coworker just call api in container component and then update the component state.
He says if your data do not need to share with other component, you can call api in component, so you don't have to write so many code in actions and reducers.
I thought this is very convenient. For example: If I have a feature : When user click the button, I have to send an email.
This feature do not need to update store by reducer, just have to alert "send success"
So I can write this code in container component:
async onClick() {
// 1. call api
const {error, response} = await sendMail({email: this.state.email});
if (response){
// 2. alert success
this.setState({
modal: {
show: true,
}
});
}
}
But I don't know if this match redux's principle.
Can I call api directly in component if the state do not need to share with other component??
You can call api from dispatched actions or from React components: it is your choice to make. There is no mandatory rules here and it depends on what you want to do with your components:
When to use React states:
It is better to have smart component handling their own state because it ease the integration in external projects. Having a component that uses Redux means a project needs to add the requires reducers to use the component.
If a component handles information not required by any other components, use React state. It is often the case for information related to UI state.
When using Redux reduces:
If you need to test your component, prefer Redux because you'll be able to connect "test actions" to your component when testing them.
If you need to share a bundle of data through components, prefer Redux to mutualise information.
This question has been treated by Gaeron on Redux github repository if you want to have a look. He explains:
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.
I suggest you have a look at classux
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
I am new in react and redux. I have a button on a component on click of that I am calling api and set the response as state. But I want that state back to clicked function where on base of that state I want some conditional work.
I dont think how to implement this.
Thanks,
Vijay
You need to use Connect.
Connects a React component to a Redux store.
It does not modify the component class passed to it.
Instead, it returns a new, connected component class, for you to use.
You need to use mapDispatchToProps so that your data is back to you at the component once fetched/retrieved making the component re-rendered, and that's what you need and that's the killing feature of Redux uni-directional flow archticeture.