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.
Related
I am making an API call, after which I want to update the store with {apiExecuted: true} by calling the ACTION_API_EXECUTED action.
What is the best way to achieve this by using dispatch?
You need to do this asynchronously in the action with the use of thunk, saga or an epic, depending upon the configuration of your project.
Based on the API response, you can then dispatch another action call to update the state.
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 using Redux in my application. One my page, I have 5 controls which subscribe to the store. But in case of certain specific actions, I do not want 2 controls to respond to the change. How can I handle this situation.
I looked at this link https://github.com/reactjs/redux/issues/580 but I could not find anything like store.getState().lastAction.
What is the best way to handle this scenario?
You should have a flag in your state saying if you should update your control or not. One of the base principle of Redux is to not allow client to know how the store is updated. You should only respond to state changes, whatever has changed the state.
But I don't really understand why you have to handle store changes by hand in react ? You should consider using react-redux.
Edit
As pointed in comments, if you need to do some side effects when dispatching actions, you should use some redux middleware such as redux-thunk, redux-saga, redux-observable, redux-loop. The simplest one for beginner is, I think, redux-thunk. It allows you to dispatch a simple function that will be executed and that will be able to also dispatch other actions.
However, to trigger a side effect for each action and being able to filter by action type, please see redux-tap as indicated in comments by #Brandon.
I come from an Angular2 world where there are services that do the normal data loading and so on, now I am on a React, Redux application and am trying to figure out what is the equivalent to Angular2 services in Redux (React). Is it Redux-thunk?
The answer is yes and no.
Yes
Angular services have the logic to load data and normally return a Promise object that gets resolved with data loaded.
With Redux Thunk middleware, you create asynchronous action creators where you put the logic for data loading. But instead of returning a Promise object directly, it waits until the data gets resolved and dispatches an action to update the state with data loaded. React components receive data from Redux store via props. (See connect() method from react-redux.)
No
Angular services are singletons that provides a specific functionality, like $http for facilitating communication with the remote HTTP servers.
Redux Thunk is a middleware and does not do anything but to allow you to write asynchronous action creators that can delay the dispatch of an action, or to dispatch only if a certain condition is met. The action creators are functions that create actions - they are not intended to provide other functionality, like communication with backend servers.
With that said, it is often a matter of coding style where and how you write the logic to load data.
You can use the Fetch API or its polyfill function, or axios library, both are Promise based. You can also consider using Observables, but it is beyond the topic, I think.
As you do with Angular services, you can put all the related logic in a single location and export them. In your action creators, you call these wrapper/helpers, listen for resolution/rejection and dispatch an appropriate action with data resolved as a payload.
Your reducers update the Redux store upon receiving an action dispatched and these state changes are propagated to React components. And this is how the Flux architecture works and how the data flows from Redux Store to React components, AFAIK.
(I might be wrong, please correct me if anything is incorrect and I am open to your opinions. I am still on the way to figure out the best practice to implement services in React applications.)
Building a React application with redux as the flux pattern.
To use an api a token exchange request needs to happen. This has to occur only once when the React application starts. The access_token returned from the token exchange needs to be stored in the redux state and accessible by other api calls.
One approach i tried is by calling a redux action in the App(parent) component, and then all other calls are within children components. New to React i now understand that this is not the right approach as the React components lifecycle events and the actions and reducers called do not follow a synchronous flow, so the redux actions are called asynchronously.
How do i ensure a redux action is called prior to any other redux action that depends on the results of the first redux action? Which middleware would be best suited for ensuring a synchronous approach redux-thunk, redux-look and redux-saga.
If you need a process to run before any other action, you could do it before creating the store, and passing the result in your main reducer function at store creation.
Then, just render the app after the promise or callback of this process is done.
Otherwise, just dispatch this initial action after the store creation, and before app render (with redux-thunk if it is async).
You can use redux-thunk to have a "promise like" behavior when displatching actions. This way you can ensure an action was done before dispatching another one.