I have created a simplistic Single Page Application (SPA) using the thunk library. This application utilizes the GitHub API to fetch a list of repositories. Initially, I had implemented an example with a class-based presentational component that included local state. However, in order to provide a simplified example, I refactored the code to utilize functional components and removed the local state mechanism. Instead, I utilized the "ref" attribute to access the input value. The updated code is functioning correctly.
- Is there a way to set a default value within the input field so that it automatically populates when the app is launched?
- I'm facing some confusion regarding the process of removing combineReducers and utilizing a single reducer. Whenever I attempt to create the store with only one reducer, my application breaks. Can you guide me on this issue?
Please find the code below:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { applyMiddleware, combineReducers, createStore } from "redux";
import { connect, Provider } from "react-redux";
import thunk from "redux-thunk";
import "./index.css";
// actions.js
const addRepos = repos => ({ type: "ADD_REPOS", repos });
const clearRepos = () => ({ type: "CLEAR_REPOS" });
const getRepos = username => async dispatch => {
try {
const url = `https://api.github.com/users/${username}/repos`;
const response = await fetch(url);
const responseBody = await response.json();
dispatch(addRepos(responseBody));
} catch (error) {
console.log(error);
dispatch(clearRepos());
}
};
// reducers.js
const repos = (state = [], action) => {
switch (action.type) {
case "ADD_REPOS":
return action.repos;
case "CLEAR_REPOS":
return [];
default:
return state;
}
};
const rootreducer = combineReducers({ repos });
const store = createStore(rootreducer, applyMiddleware(thunk));
// App.js
function App(props) {
var textInput;
var setTextInputRef = element => { textInput = element; };
var submit = () => props.getRepos(textInput.value);
return (
<div>
<h1>Github username: </h1>
<input type="text" ref={setTextInputRef} />
<button onClick={submit}>Get All Repos</button>
<ul>
{props.repos.map((repo, index) => (<li key={index}><a href={repo.html_url}>{repo.name}</a></li> ))}
</ul>
</div>
);
}
// AppContainer.js
const mapStateToProps = state => ({ repos: state.repos });
const mapDispatchToProps = { getRepos };
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
ReactDOM.render(<Provider store={store}><AppContainer /></Provider>, document.getElementById("root"));