This's my first react and redux project. I'm try to learning by doing from main redux repo's examples and i can't find an example for todomvc async in that repo.
Finally i've found an excellence tutorial about redux todomvc async and i'v added this patch to existing redux todomvc app.
If you see my patch you will see i'm try to add snapshot data when interact with remote server and use for reject change data back when got an error response from server.
My questions:
What's the best practice to do for about something like i'm trying?
How i can store snapshot? or
What's best practice to reject change the data?
Thanks for advance.
I got the answer, see in detail http://redux.js.org/docs/recipes/ImplementingUndoHistory.html
Related
I am trying to help a friend build a React/Redux app where it will get some data from a JSON file and diplay them and be able to edit them.
As we are both new to this and the deadline is pretty close I was wondering if there is anyone who can enlight us on how to do it.
I tried a couple of tutorials like these
Tutorial 1
Tutorial 2
but they weren't too much help as they are either outdated or not what we are looking for.
I apologize if this is not the place to ask this but this project has to be done.
We are either looking someone to help us to it or send us like good examples on how to do it.
Thank you
For fetching data in Redux, you need to write a Redux middleware or use middleware wrapper like redux-saga or redux-observable, etc. I recommend you to use redux-observable. Take a look at this repo for how to build a todo app using React and Redux Observable.
About Redux middleware, I suggest you to read this article.
I am trying to create a blog application and I am a bit confused on the data flow patterns of React.
Should I be trying to use something like Redux to store all of my posts after fetching the posts? Do I use local storage?
How do I then tell a component to render the 'expanded' version of the post? Is it better to re-use a 'post' component or should I just create two seperate components, one for the title and one for the full post?
I know it's two questions in one, but they kind of go together. Thanks in advance
Here's what I've found out about these topics after 6 months into my self-taught React journey.
In my opinion, React built-in features are more than enough to handle state for a small to medium applications (especially if you're working alone as a single developer).
If you turn to Redux right away, you'll have to learn this whole new pattern of handling state in a single immutable store and how to connect your components to it.
Since you will be most likely fetching data asynchronously, you'll need a helper library to work async on Redux: redux-thunk or redux-saga.
So right from the start, you'll have to add:
redux
react-redux
redux-thunk OR redux-saga
That is a lot of documentation to digest. It's perfectly doable, but I couldn't agree more with this quote:
don't solve problems that you don't have
It will be hard to learn those tools, since you've never faced the problems that they solve. Problems that you don't encounter just yet when you're starting to learn React.
Read this (from Redux creator):
https://medium.com/#dan_abramov/you-might-not-need-redux-be46360cf367
So, my recommendation to you:
Learn basic React (with classes):
https://reactjs.org/docs/getting-started.html
Then learn React Hooks (and you can basically forget about class components):
https://reactjs.org/docs/hooks-intro.html
Build your project using only React at first. And see how it goes. Then you can read more about Redux and what it does, and will be able to make a better choice on if you really need it or not.
From what you've told us about your project:
Keep a state for all your posts in a component high in the tree. Maybe inside the <App/> component itself.
Build your functions to fetch and update post data and update the state with the response.
Render how many components as you wish. Displaying full info about the post inside a BlogPostComponent or simplified version inside a BlogPostThumbnailCard with just the thumbnail and the title, for example.
If you want to be ready for the next versions of React and have a shorter code, you should try the hooks and avoid Classes
https://reactjs.org/docs/hooks-intro.html
You can organize your code as you want, but this is more interesting to have scalability with your components and reuse them with different properties
I understand that redux-form handles reducers and actions for me which is a plus. But as far as I can tell the data will be returned as JSON upon submission and the added complexity to my app may not be worth while.
The redux-form workflow seems to be counter intuitive to the apollo graphQL wrapper that takes a mutation function prop and a gql tag in the react work-flow.
Is redux-form the wrong tool for the job or is there some insight I am missing?
I would like to hear about any alternative tools others are using in react-apollo.
-Thanks
I stand corrected.
Redux-form is worth using in Apollo-React-Redux.
After some research I found a minimumly invasive way to implement redux-form into an Apollo-React app if anyone is interested:
https://github.com/jferrettiboke/react-auth-app-example/blob/master/client/src/containers/SignInFormContainer.js
It took 2 lines in my index.js to include the formReducer (as expected) and sampling his signin form and its container.
His containerized method actually matched up well with the usual react- apollo work flow.
Thanks
I'm a react-redux beginner and this may seem like a trivial and kind of stupid question but I did not manage to find a satisfactory answer.
I have a react-redux application and receive a kind of complicated data structure from an API, the details don't matter I believe.
I want to know if there is a tool that allows us to write some quick REPL-style commands in the console or in the debugger. I currently have react and redux developer tools and a logger middleware which is perfect for seeing the evolution of the state and logging but I can not manage to go through/inspect the nested data I receive.
Thanks in advance folks,
David
Not sure if it's entirely what you are after, but can't you just keep a ref to the store on the window object? That way you can access it from the console?
var yourStore = createStore(...);
window.store = store;
I'm codesplitting my React+Redux application as described by Dan Abramov here, and everything appears to work fine. However, I'm also rendering the application on the server. This results in console error documented by this answer. However, I'm not attempting to clean up old state—I'm loading the state as the server computed it. The problem is the state from the server gets loaded into the global state before the codesplitted modules are loaded.
If I understand Dan properly, the error is just a warning, and everything appears to function correctly, but it's really not a pleasant development workflow to see errors on nearly every page load.
Is there anything I can/should be doing differently with my codesplitting code to alleviate this? It's nearly verbatim to Dan's example.
The answer was kind of obvious when it hit me. Just like you send the redux state to the client, you need to tell the client which optional reducers need to be included into the combined reducer on creation.
Based on Dan Abramov's work in the linked answer in my question, I changed store.asyncReducers into an array of paths instead of a map of objects. Then I was able to serialize this array and send it to the front-end where it was able to require the async reducers that the server-side render used.