It’s hard when you work on your personal project to be the product and UX designer, to do the design (especially if that’s not where your skills lay) and to plan what to build and how and when.
I started with a shopping list when I picked this project up again and started stripping out styled components and the next natural step should be Redux, but being the first time I implement it, I’ve been somehow scared of opening this big door and excited at the same time.
I helped organise State of the Browser, a conference me and other volunteers organise as part of London Web Standards. The conference was yesterday and there was a mind blowing talk about how you can use CSS grid and shapes to achieve magazines layouts. This really hit home and I sat down today on my laptop convinced I was going to strip `styled-grid` out and migrate to CSS grids (there was also a lot of frowning towards Bootstrap!)
BUT
I remembered the next item on my shopping list is Redux.
I should mention how one one of the main reasons I got stuck on the app is the need to pass data across components which sit at the same level, rather than passing data down the children, like React is built for.
I then found this article https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 which suggested to use a callback. As per the article:
- Define a callback in my parent which takes the data I need in as a parameter.
- Pass that callback as a prop to the child (see above).
- Call the callback using this.props.[callback] in the child (insert your own name where it says [callback] of course), and pass in the data as the argument.
I implemented this but when I was introduced to a store system both in React and Angular, I quickly realised that’s exactly what I needed ! So I decided to refactor.
I started setting Redux up as per this guide https://code.likeagirl.io/tutorial-for-adding-redux-to-a-react-app-1a94cc1738e5 and had a read of the Redux documentation https://redux.js.org/ and I asked myself, as per the guide What's the minimal representation of your app's state as an object?
- current bead selected the user intends to customise –
currentBead - for the current bead selected, has the user picked to paint it half or full?
paintMode - an object containing the necklace pattern, for example: first bead: half, yellow etc – ideally with the name of the colour written on the paint bottle – as a developer, I’d happily receive the order for the necklace as a json object, maybe that can go in the order code!
Like many online tutorials, I start following the instructions, try to adapt them to what I need, then start questioning everything they write, because it feels I might not need all the code they have and get lost. This has always been my biggest frustration when it comes to learning, both from books and online tutorials. And don’t get me started on how simple the examples are, like a reducer that just increments or decrements state – thanks, my state is actually quite complex, why not offer an easy scenario example and a more complex scenario example?
Recent Comments