Today I will be talking about an app that I am working on with a couple buddies. At the moment it is a bit on hold because we are handling different personal things, but we will get back to it soon. The app is a purely front end application of "Open Faced Chinese Poker" one of the guys I work with is into gambling and cards and he wanted to make an app for this game. It's an interesting game, I would suggest looking it up for more info if you're interested.
When we started mocking up the app we decided that we were going to use redux rather that just react hooks, because we thought we could do with a bit more practice with redux. I have struggled with redux before, but I think that it is a great tool and I like it a lot. I think the thing about redux that a lot of people who are knew to it find daunting is really just the setup. But before I get into the setup, I just want to touch on why someone would want to use redux and some of the great things about redux and some possible drawbacks.
Redux is a way to handle state in react components. In a general react component, one might handle state in a specific component, yet want to use that state in another component. Without redux the only way to do this is to pass state down via props. In large scale applications you might imagine this becoming quite tedious and redundant. Redux manages state in a global store which allows any component access via mapping state to props which I will explain later. This global state store can be very powerful and handy, but its very nature is also sometimes problematic. As the app grows, generally the store will as well. The very problem we try to solve with redux now creates itself as well. Our store might become so large and complex that when we only want/need to use part or one portion of the store we have to figure out what part that is and for someone new to a codebase this might be overwhelming.
Once redux is setup it is not too difficult to use but the setup, especially when it is new for the programmer, can be a little hard to remember. The first thing, obviously, is to get your dependencies in order. You'll want 'redux', 'react-redux' and I generally like to use 'redux-devtools-extension' . The last one is not absolutely necessary but it is nice to have as it well allow us to use the redux dev tools in the browser to monitor state.
Then we will want to make our store. This will be a file in our root directory. It will look something like this.
The createStore method will create our store for us, and we want to declare it as "store" so we can export it elsewhere. The first argument for our createStore method will be the reducers being used, and generally you might want to make use of the combineReducers method to put all your reducers together in a rootReducer file. The combine reducer will put all of the used reducer files in an obj format. Something like this.
In order to use it within our store it might look like this .
And boom you have a store. In my next blog post I will talk about reducers and actions, which are key to using redux.
Top comments (0)