Today we will talk about starting a project with Redux. To explain this, we need to first know what is redux. Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. It manages state easily using a single state tree, and although it is used mostly in React it can be used in many libraies.
Setting up Your New Project
You can set up your project in two ways.
There are two ways to set up your project. They are both very similar to each other
- If you have an older version of npm Using “create-react-app [name-of-your-app]”
- If you have a version of npm of 5.2 or above you use “npx create-react-app [name-of-your-app]”
Adding Redux to Your Project
For Redux we need to add some required packages.
- redux
- react-redux : allows bindings to be explicitly installed.
- redux-thunk : middleware that allows for action creators.
To install these libraries simply run “npm install redux react-redux redux-thunk —save”
Using Redux
Now that we have Redux up and running we have some things to look at.
Actions, actions are payloads of information to send data to the store and they require a type.
Action Creators, action creators are functions that create actions, by having redux-thunk installed we can write these action creators. You can find these actions created in the src folder.
Reducers, reducers describe how the application will change state in respect to the actions that are sent to the redux store.
Redux Store, the redux store does a few things. It holds the application state, allows access to the state by using getState(), it allows the state to be updated using dispatch(action), it registers listeners using subscribe(listener). For a redux app you only need one store.
On the next post I will get more into the store and how to connect it to your app.
