Yarn add redux react-redux redux-logger react-router-dom reselect bootstrapĪfter that lets create our reducer, with the initial state with some data and the neccesary actions that we will use. Lets add the dependencies we’re going to use. This will not consume an API to keep things simple, an API basically means that we should also add an extra layer for managing side effects but for the scope of this tutorial we will omit that. The todo example is the most straight forward thing to do, but feel free to use whatever thing you want, like movies, books etc. In this post I’ll be doing a basic redux CRUD like (create, read, update, delete) without persisting the data that hopefully will help you understand a little bit how redux works and why it is useful in some cases.įirst of lets scaffold a react app using react-create-app Here’s the starting code.When you start learning redux, at first taking a grasp on how it works can be confusing, maybe you come from an object oriented language and you are accostumed using mutation with classes or you just never done anything with ecmascript 6 so you’re not used on the new syntax and snippets you see on the web. Let’s start adding some functionality! The TodoForm ComponentĪdd a new file, src/TodoForm.js. It’s already set up with material-ui to give our page a professional look. The app should be running on localhost:3000, and here’s our initial UI. The master branch has the finished project, so checkout the start branch if you wish to follow along. Here are the GitHub and CodeSandbox links. Display todos in a nice Material Design fashion.
I recommend this for any language or library you want to try out. Todo lists are the most overused example for a good reason - they’re fantastic practice. Instead, they suggest practicing Hooks in non-critical components first, then using them in place of classes going forward. However, since there are no plans to remove classes from React and Hooks will work with existing code, the React team recommends avoiding "big rewrites". React 16.8.0 was the first stable release to support Hooks, and there are more tutorials and example code every day. Adopt Hooks GraduallyĪt the time of writing, Hooks were in alpha, and their API could have changed any time. Avoiding ES6 classes, because they’re quirky, not actually classes, and trip up even experienced JavaScript developers.įor more detail see React’s official Hooks intro.Separating your app’s concerns based on logic, not lifecycle hooks.Sharing stateful logic without render props or higher-order components.Isolating stateful logic, making it easier to test.They’re functions that give you React features like state and lifecycle hooks without ES6 classes. React v16.7.0-alpha introduced Hooks, and I’m excited.
0 kommentar(er)
