Redux is very complex for a beginner to understand. I remember when I first started, it was a complete disaster. Today I just want to take you through the steps to get started with Redux in your app
Redux is a state management tool mostly used with React. It is similar to Vuex for Vue.js
First things first, Why use Redux
In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult.
Let’s get started to build our app
npx create-react-app my-app
I am going to use materialize to style my application check it’s documentation on https://materializecss.com/getting-started.html
Add cdn in the index.html file
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
To add redux to our app install
- npm install redux react-redux — save
2. npm install redux-thunk
Let’s create the store
In index.js add the following:
Create a store.js in a new folder store. Add the following code
The store consist of an initial state and reducer. Enhancers is for redux chrome debug tools. I really recommend it. For more info read https://github.com/reduxjs/redux-devtools. We add thunk s our middleware
Now let's create our index.js in reducer folder . This file joins all reducers in our application . To do that we use combineReducers from redux
Create postReducer.js file;
To really understand I suggest a youtube tutorial https://youtu.be/qrsle5quS7A by Academind.
Check out the whole project on my Github https://github.com/maru25-alt/React-Redux.git