This is a pretty simple working example using React-Redux to select a user from app.com/user/:userId
and then fetch/display that user's info from a remote API
Most of the examples/code I can find online use class-based components but since I already have part of a project written using a functional approach I'm looking for feedback on how I'm integrating redux into functional components. I'm also not a Javascript expert by any means either so general critique of my JS is welcome as well!
Store.js:
import { createStore } from "redux";
const initialUser = { user: [] };
const userReducer = (state = initialUser, action) => {
switch (action.type) {
case "ADD_USER":
return Object.assign({}, state, { user: action.user });
default:
return state;
}
};
export default function Store() {
return createStore(userReducer);
}
Actions.js:
const validResp = (resp) => {
return resp.data.code === 200;
};
const extractUser = (resp) => {
return resp.data.data;
};
export const addUser = (resp) => {
let user = "";
if (validResp(resp)) {
user = extractUser(resp);
}
return {
type: "ADD_USER",
user: user
};
};
index.js:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AppContainer from "./AppContainer";
import Store from "./Store";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={Store()}>
<Router>
<Route path="/user/:userId" component={AppContainer} />
</Router>
</Provider>,
rootElement
);
AppContainer.js:
import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import axios from "axios";
import { addUser } from "./Actions";
const baseUrl = "https://gorest.co.in/public-api/users/";
export default function AppContainer() {
const url = baseUrl + useParams().userId;
const user = useSelector((state) => state.user);
const dispatch = useDispatch();
useEffect(() => {
axios.get(url).then((resp) => dispatch(addUser(resp)));
});
return <App user={user} />;
}
function App(props) {
return (
<div className="App">
Name: {props.user.name} <br />
id: {props.user.id}
</div>
);
}