React.js Redux Project to Make HTTP Request to JSONPlaceholder API and Display Posts in Browser

 

 

npx create-react-app reduxproject

 

 

cd reduxproject

 

 

npm i redux

 

 

npm i redux-thunk

 

 

npm i react-redux

 

 

After installing all the libraries we will make the store for the redux app.

 

So create a file called store.js inside the src directory of your react.js project

 

store.js

 

 

 

Here in this file we have defined the state or data of the application and also the root reducer. So now make a reducers folder and inside

 

it make a index.js file and copy paste the below code

 

 

reducers/index.js

 

 

 

 

So here we now need to make this postsReducer.js file inside the same directory which will handle all the operations regarding the

 

fetching and displaying of posts from jsonplaceholder api

 

 

reducers/postsReducer.js

 

 

 

 

And now we need to connect the store so that it is available at the global level to all the components. So now inside the App.js file

 

copy paste the below code

 

 

App.js

 

 

 

 

So now we need to create the components so create a new folder components and inside it create

 

Postform.js

 

 

 

Posts.js

 

 

 

 

At last now we need to make the actions inside redux to tell what to perform with the state . Create a actions folder

 

 

actions/postActions.js

 

 

 

 

types.js

 

 

 

 

npm start

 

 

 

Leave a Reply