我有一个简单的带有SPA的SPA。它使用github API获取存储库列表。 我以前有一个关于类演示组件的示例。它具有局部状态,但是我决定尽可能简化示例,并将其重构为功能,并删除局部状态,并使用ref获取输入值。效果很好
这是代码: https://codesandbox.io/s/k13nowrj33
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"));
答案 0 :(得分:2)
1。)您可以为此使用defaultValue
。
2。)如评论中所述,如果您不使用combineReducers()
,则需要更改mapStateToProps()
。
这是一种实现方法:
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 store = createStore(repos, 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 defaultValue="colinricardo" 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 });
const mapDispatchToProps = { getRepos };
const AppContainer = connect(
mapStateToProps,
mapDispatchToProps
)(App);
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById("root")
);
CodeSandbox here。
要获取带载的回购协议:
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 store = createStore(repos, applyMiddleware(thunk));
// App.js
class App extends React.Component {
componentDidMount() {
this.submit();
}
submit = () => this.props.getRepos(this.textInput.value);
render() {
return (
<div>
<h1>Github username: </h1>
<input
defaultValue="colinricardo"
type="text"
ref={ref => (this.textInput = ref)}
/>
<button onClick={this.submit}>Get All Repos</button>
<ul>
{this.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 });
const mapDispatchToProps = { getRepos };
const AppContainer = connect(
mapStateToProps,
mapDispatchToProps
)(App);
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById("root")
);