I need some functionality to be run after any/every action, but after the reducer has run and state has changed, so meta-reducers won't work here.
I found the answer in ActionsSubject. The second answer in this question was exactly what I needed - how to subscribe to action success callback using ngrx and effects.
I needed a way to watch what was happening in ngRx because the library I'm developing needs to be able to be used in any javascript environment. It might be React or Swift, or even wrapped in a NodeJs api. I'm happy ngRx provides an easy way to monitor the actions flowing through the system - that means Angular is on the "ok list" to use our library.
Related
What's the company standard? If a company decides to adopt Redux, do I need to convert every state/prop into redux form?
For example. I have a loading/setLoading state for the home page. Can't see if being used in other places. Do I need to make a redux version of actions for it?
No, as stated in the Redux style guide (general reading recommendation!), you should Evaluate Where Each Piece of State Should Live.
Not everything needs (or even should) be global data. Only use Redux for stuff that is "global". It does not replace props or local component state!
When I searched for Redux most of the time I get the answer
Redux is a predictable state container for JavaScript and comes as an
external library which can be used together with front-end frameworks
like React, Angular, Ember.js, Backbone, etc.
I did not get the definition actually. What does it mean by **predictable state container **?
And as a new tool, it should solve some problems with web development. So, what redux does and how it facilitates us?
I think when someone says that Redux is a predictable state container it means that redux has a very strict way how to change the data, sometimes called unidirectional data flow.
I mostly used it in React application, so I can tell which problem it solves in this case. While your application is small, you probably will not see the reason to use Redux, but when it grows, when you have lots of components which use the same data and have to communicate with each other, it becomes really painful to store all state somewhere in the root components and pass it through all the children. There may be performance issues as well, all components between a root one a chield which needs some part of your state will be re-rendered.
So using Redux easily connect your components and select those parts of the state which they need. Also, communication between components becomes much easier, instead of passing callbacks to props, your components just listed to state and represent it, any time you need to change a state just send an action.
Regarding predictable state management, Redux is some kind of event sourcing, instead of changing a state directly, so send actions (events) which describe how to modify the state and reducer applies these changes.
There are way more things to say about Redux, at least middlewares, if you are familiar with Rx, you can try to use redux-observable which are really powerful, you can listen to some actions or a state changes to combine it with others. I recommend you to take a look at redux documentation and some article like this, I believe you will find an answer to your question.
I am creating a project but very new to React and async programming. I am using React to display users email via an API.
I can get all the email data via ComponentDidMount calls to the API. It displays them correctly and I can get subject,body etc. Now, I need to send the body of the currently selected email via a button to my back-end side, do some work with it (compare strings to database etc) and then fetch back the result and display it in a div. What would be the best way to go about it?
I couldn't find any good answers to this from google.
Should I have gotten emails and done all that work all server side first somehow before fetching both the body and the result along with it with React? Or is there a way I can send the current body string out to my controller, do the work and then get the result back all in async?
Thank you in advance!
Although this question is too vague to answer but I know what you're coming from and I want to give you some ideas about the general structure of a React-related project:
The backend side should be designed to Restful Api Endpoints.
Use Redux to manage frontend (react) application's state.
Use Redux-thunk (or Redux-saga) to manage side-effects (call api)
In componentWillMount or componentDidMount, use Redux dispatch to dispatch an action to Redux then use Redux-thunk (or Redux-saga) to call api and update application's state.
The component which is connect to application's state will be updated based on state's changes.
It's long way to go but hey, that's what all of us have to go through. Good luck!
PS: If any terms are not familiar with you, do some google-ings.
Assuming I want to reuse a component with redux, what are my options?
In more detail:
Let's assume I have a generic list component with items and filter input. I want to use this component in 2 places. The component needs to be closed API, meaning it should dispatch and reduce the actions all within itself. It needs to handle state changes and show the filtered items as well.
Let's assume the reducers are exposed publicly to build the store.
What would be the best approach of building the state object, the reducer and the action.
The main issue is how to 'bind' each component to a different items property on the store state.
Update:
Here is a discussion very similar to my qiestion:
Using Redux in reusable React component. I commented on the discussion with a proposal I found. If it will be accepted I will post it here. Meanwhile you can answer my question with your proposals.
I'm new to Redux, and haven't tried the library yet, but MrEfrem/redux-fly seems to me as a very interesting answer to this problem.
I'm trying to write module UI components that can be imported and used by any container that wants it. The tool I'm writing allows a user to click on an element and the information of the element should display on a seperate panel, this feels like an obvious case of using redux to update an element-key value in the store whenever a click action is used which will update the display panel.
However, I'm not certain how to use the store. If I was writing this as part of an app I would create a reducer for the component then manually add that reducer to my reducers.js file (created by reduxbootstrap) and magic would happen. However, as a component I expect to import into multiple other apps I would prefer not to require each app to have to import the reducer and manually add it to their list of reducers for the component to work.
Is there a cleaner way of getting my component to plug and play with an existing store? Ideally I want someone to be able to import it and use it immediately in their UI.
The one way I know that would work is to not use redux at all, i could make the interaction work internally to the component without using redux stores at all, but it feels odd to intentionally write a non-redux component to be used in a redux app.
I don't think there is a way without you exposing your reducer to be included manually in the app root reducer. A lot of popular libraries like redux-form and react-router-redux follow this approach which I think it gives the app developers more control over their redux store.