Reactjs Redux thunk输入的默认值

我有一个简单的温泉浴场。它使用GithubAPI获取回购协议列表。 我之前有一个关于类呈现组件的示例。它有一个局部状态，但我决定尽可能地简化示例，并将其重构为函数，删除局部状态，并使用ref获取输入值。它很好用

如何在输入字段中设置默认值，以便在应用程序加载时获得该值

当我使用createStore和single reducer应用程序时，我不太明白如何删除组合减速机并使用单个减速机

代码如下：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“redux”导入{applyMiddleware、CombineReducer、createStore}；
从“react redux”导入{connect，Provider}；
从“redux thunk”导入thunk；
导入“/index.css”；
//actions.js
const addRepos=repos=>（{type:“ADD_repos”，repos}）；
const clearRepos=（）=>（{type:“CLEAR_REPOS”}）；
const getRepos=username=>async dispatch=>{
试一试{
常量url=`https://api.github.com/users/${username}/repos`；
const response=等待获取（url）；
const responseBody=wait response.json（）；
调度（addRepos（responseBody））；
}捕获（错误）{
console.log（错误）；
分派（clearRepos（））；
}
};
//reducers.js
常量repos=（状态=[]，操作=>{
开关（动作类型）{
“添加回购”案例：
return action.repos；
“明确回购”案例：
返回[]；
违约：
返回状态；
}
};
const rootreducer=combinereducer（{repos}）；
const store=createStore（rootreducer，applyMiddleware（thunk））；
//App.js
功能应用程序（道具）{
var文本输入；
var setTextInputRef=element=>{textInput=element；}；
var submit=（）=>props.getRepos（textInput.value）；
返回(
Github用户名：
获得所有回购

{props.repos.map（（repo，index）=>（
）}

);
}
//AppContainer.js
const-mapStateToProps=state=>（{repos:state.repos}）；
常量mapDispatchToProps={getRepos}；
const-AppContainer=connect（mapStateToProps、mapDispatchToProps）（应用程序）；
render（，document.getElementById（“根”））1。）您可以为此使用
defaultValue

2.）如评论中所述，如果您不使用
combineReducers（）
，则需要更改
MapStateTrops（）

这里有一种方法：

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")
);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“redux”导入{applyMiddleware、CombineReducer、createStore}；
从“react redux”导入{connect，Provider}；
从“redux thunk”导入thunk；
导入“/index.css”；
//actions.js
const addRepos=repos=>（{type:“ADD_repos”，repos}）；
const clearRepos=（）=>（{type:“CLEAR_REPOS”}）；
const getRepos=username=>async dispatch=>{
试一试{
常量url=`https://api.github.com/users/${username}/repos`；
const response=等待获取（url）；
const responseBody=wait response.json（）；
调度（addRepos（responseBody））；
}捕获（错误）{
console.log（错误）；
分派（clearRepos（））；
}
};
//reducers.js
常量repos=（状态=[]，操作=>{
开关（动作类型）{
“添加回购”案例：
return action.repos；
“明确回购”案例：
返回[]；
违约：
返回状态；
}
};
const store=createStore（repos，applyMiddleware（thunk））；
//App.js
功能应用程序（道具）{
var文本输入；
var setTextInputRef=element=>{
textInput=元素；
};
var submit=（）=>props.getRepos（textInput.value）；
返回(
Github用户名：
获得所有回购

{props.repos.map（（repo，index）=>(


))}

);
}
//AppContainer.js
const-mapStateToProps=state=>（{repos:state}）；
常量mapDispatchToProps={getRepos}；
const AppContainer=connect(
MapStateTops，
mapDispatchToProps
)（App）；
ReactDOM.render(

要获取已加载的回购，请执行以下操作：

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")
);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“redux”导入{applyMiddleware、CombineReducer、createStore}；
从“react redux”导入{connect，Provider}；
从“redux thunk”导入thunk；
导入“/index.css”；
//actions.js
const addRepos=repos=>（{type:“ADD_repos”，repos}）；
const clearRepos=（）=>（{type:“CLEAR_REPOS”}）；
const getRepos=username=>async dispatch=>{
试一试{
常量url=`https://api.github.com/users/${username}/repos`；
const response=等待获取（url）；
const responseBody=wait response.json（）；
调度（addRepos（responseBody））；
}捕获（错误）{
console.log（错误）；
分派（clearRepos（））；
}
};
//reducers.js
常量repos=（状态=[]，操作=>{
开关（动作类型）{
“添加回购”案例：
return action.repos；
“明确回购”案例：
返回[]；
违约：
返回状态；
}
};
const store=createStore（repos，applyMiddleware（thunk））；
//App.js
类应用程序扩展了React.Component{
componentDidMount（）{
这个。提交（）；
}
submit=（）=>this.props.getRepos（this.textInput.value）；
render（）{
返回(
Github用户名：
（this.textInput=ref）}
/>
获得所有回购

{this.props.repos.map（（repo，index）=>(


))}

);
}
}
//AppContainer.js
const-mapStateToProps=state=>（{repos:state}）；
常量mapDispatchToProps={getRepos}；
const AppContainer=connect(
MapStateTops，
mapDispatchToProps
)（App）；
ReactDOM.render(
,
document.getElementById（“根”）
);
默认输入值是什么？只是任何像字符串一样的github用户名。例如-MapleDrive“应用程序中断”是什么意思？如果不使用