I use create-react-app to initially create my project, and Redux to manage its state.
Before, I think it's the MVC model because React render the view, and when the someone using the client makes changes, the dispatcher will take the actions then send it to the store, the store using reducer to process, update a state if needed (and isn't state just the model?) and send it back to the view, , then return the updated view.
Is that right?
Related
I am working on a React application and use react-redux and redux-thunk for integration with redux for state management.
I want to display a modal whenever I add a new entity. The ideal solution from my point of view seems to be:
In the action creator where I add the entity, the redux state should be updated with the notification message if the operation was succesfull
The main component of the app (The App component) should somehow listen to the redux state, and whenever a notifications message appears it should render the modal with the message.
I do not have an idea on how to implement the second point (how to subscribe the main component to state change and react accordingly).
On another note, there might be a better alternative to implement the notification component so I will gladly listen to alternative solutions as my exposure to front end development and React is quite limited.
First thing is that you probably want to display a "Snackbar" component (Example from Material-ui), and not a dialog as you probably might have several entities created one after the other, and you don't want to flicker the dialogs to the user...
Regarding the redux store, I think you should have a specific part in your store to hold all the notifications (Array of notifications), And every time a message with new entity comes you add a notification to the array. And after some time (Say 5sec) you remove the notification from the array.
In the ui, your component should listen to this part of the store, and just display the Snackbars one after the other.
I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.
Im currently working on an application which uses react, redux, graphql, apollo and MongoDB.
When the application first loads, im looking to populate the application local data using the database, from there use the application state for any further display to the view. My problem is, im not sure when to make a call to the database given this particular stack
All service call should be done in componentDidMount() life cycle method or you can Use middleware like thunk to call sync service call or db call.
componentDidMount(): After mounting component call service and set state, this state will be used on UI to render any data.
Middleware: You dispatch an action like load products. This will call middle ware to call service and store details in redux store. This can render data on UI.
Let me know if you need more explanation. This is most common architecture which people use for react apps.
I'm new to React, so forgive the newbie question.
I've got a plain ol' JS object that wraps a WebSocket and exposes state based on the messages it's received over the socket, e.g. the current set of messages in a chat. In Angular or Polymer (or WinForms and WPF), when new data comes in, I'd send a notification using a standard protocol to let data bound clients know that the state has changed and re-rendering would happen for those clients.
I'd do the same thing in this case by extending React.Component in my WS wrapper class, except that it's got no UI (it's just a cache of the state gleaned from the messages flowing over the WS), so it would return null from render and I'm not clear on whether it stays in the DOM or not at that point. Further, I'm not sure how to make UI from a parent or peer element of the WS wrapper object update as it's state changes.
What's the React way to have a data-only component? I'm trying to get my head around React before I dive into Redux, so hopefully the answer here doesn't require picking up a Flux implementation.
Thanks!
Sounds like the wrapper JS object should be the App "global" state. Regardless of where you contain it in React (a top-level component with vanilla React, or a store in Redux).
Assuming that you put it as the state of a top-level component, then when new data comes in, all you need to do is setState(newData)
All UI driven by this data should be described within that top-level component that holds the state. All children components can be read-only.
When the top-level component changes its state, all children will be re-rendered with new read-only props.
I have been creating a React calendar. At first I just wanted to declare the calendar in the html with the appointments, like this:
<Calendar appts={appts} />
But then I realized that my calendar was going to have to be a full app, talking to the REST endpoints and have it's own store and actions.
The calendar was not the end goal, and now I need it to be part of a bigger 'Flux' app. How is everyone architecting their apps, so that the pieces can be reused, say the calendar, in other apps? How do the different Flux apps talk to each other? Are there any examples or blog posts where this is talked about?
Flux is an publisher-subscriber architecture recommendation from Facebook. RefluxJS is an easy to use implementation of this architecture. It adds actions and stores to ReactJS.
Actions are triggers for change. Whenever the user interacts with the page you call an action. Actions have almost completely replaced setState inside a React component for me. When a user creates an event such as a form field change, I fire an action with the event data as a function parameter. In this architecture, actions allow React components (classes) to broadcast publish changes.
Stores subscribe (listen) to actions. The simplest store simply passes on parameters that have changed with a this.trigger call. Other stores may listen to other stores, validate data, stuff parameters into data, set data into an object, or push data onto an array than broadcast the new dataset with a this.trigger call.
React components (classes) and stores can subscribe (listen) to stores. When these stores update, you can
Update state and all dependent props
Do something with the updated store dataset
Reflux comes with a very useful connect mixin which allows you to link the state of a class to a store. Be careful though, be sure to implement getInitialState in the store if you do this. Otherwise, your class will start with a null state. Another useful mixin is the ListenerMixin if you just want the component to do something when a store changes.
For more information, be sure to checkout the RefluxJS README.