Javascript 使用redux sage将常量设置为某个值，直到调用为止

也许我应该解释一下我想做什么，我有一个搜索功能，可以显示api中的信息，我想让repos的默认值显示为“example”，这样在开始任何搜索之前，所有repos的示例都会显示出来，但是我想让搜索栏显示Search（占位符），我在下面的代码中将用户名改为“example”来实现这一点

 import { fromJS } from 'immutable';

 import {
  CHANGE_USERNAME,
 } from './constants';

 // The initial state of the App
 const initialState = fromJS({
  username: 'example', // this makes the search bar have the text example on it
 });

 function homeReducer(state = initialState, action) {
  switch (action.type) {
   case CHANGE_USERNAME:

  // Delete prefixed '@' from the github username
   return state
    .set('username', action.name.replace(/@/gi, ''));
   default:
     return state;

  }
 }

 export default homeReducer;

但它也给出了搜索栏示例的默认值，您必须删除它才能进行另一次搜索

只是要添加更多的代码

                   export class HomePage extends  React.PureComponent                                      { // eslint-disable-line react/prefer-       stateless-function
                      /**
                           * when initial state artist is not null, submit  the form to  load repos
                     * 
                  */
            componentDidMount() {
              if (this.props.username && this.props.username.trim().length >  0) {
              this.props.onSubmitForm();
                }
         }

        render() {
           const { loading, error, repos } = this.props;
          const reposListProps = {
          loading,
            error,
          repos,
          };

         return (
           <div>
              <Helmet
               title="Home Page"
              meta={[
                  { name: 'description', content: 'Search upcoming concerts  by your favorite Artist' },
                    ]}
              />

              <SearchWrapper>
                <form onSubmit={this.props.onSubmitForm} autoComplete="off">
                   <label htmlFor="username">
                    <InputSearch
                   id="username"
                  type="text"
                  placeholder="Search"
                 value={this.props.username} 
                onChange={this.props.onChangeUsername} 
                autoComplete="off"
               />
            </label>
          </form>
           <InputIcon>
                <Icon_eyeglass className="material-     icons">search</Icon_eyeglass>
                 </InputIcon>
               </SearchWrapper>
             <ActionBar />
                      {/*ActionBar should be render in App main */}
             <ReposList {...reposListProps} />
          </div>
           );
       }
      }

        HomePage.propTypes = {
          loading: React.PropTypes.bool,
         error: React.PropTypes.oneOfType([
           React.PropTypes.object,
       React.PropTypes.bool,
         ]),
        repos: React.PropTypes.oneOfType([
        React.PropTypes.array,
         React.PropTypes.bool,
         ]),
          onSubmitForm: React.PropTypes.func,
         username: React.PropTypes.string,
        onChangeUsername: React.PropTypes.func,
       };

      export function mapDispatchToProps(dispatch) {
        return {
          onChangeUsername: function onChangeUsername(evt) {
          return dispatch(changeUsername(evt.target.value));

          username.value = "";
          },
       onSubmitForm: (evt) => {
         if (evt !== undefined && evt.preventDefault) evt.preventDefault();
          dispatch(loadRepos());
      value = "";
        },
        };
       }

      const mapStateToProps = createStructuredSelector({
        repos: makeSelectRepos(),
         username: makeSelectUsername(),
        loading: makeSelectLoading(),
      error: makeSelectError(),
       });

导出类主页扩展了React.PureComponent{//eslint禁用行React/prefer-无状态函数
/**
*当初始状态不为空时，提交表单以加载repos
* 
*/
componentDidMount（）{
if（this.props.username&&this.props.username.trim（）.length>0）{
this.props.onSubmitForm（）；
}
}
render（）{
const{loading，error，repos}=this.props；
常量reposlistrops={
加载，
错误，
回购协议
};
返回(
搜索
{/*ActionBar应在App main中呈现*/}
);
}
}
HomePage.propTypes={
加载：React.PropTypes.bool，
错误：React.PropTypes.oneOfType([
React.PropTypes.object，
React.PropTypes.bool，
]),
repos:React.PropTypes.oneOfType([
React.PropTypes.array，
React.PropTypes.bool，
]),
onSubmitForm:React.PropTypes.func，
用户名：React.PropTypes.string，
onChangeUsername:React.PropTypes.func，
};
导出函数mapDispatchToProps（调度）{
返回{
onChangeUsername：函数onChangeUsername（evt）{
返回分派（changeUsername（evt.target.value））；
username.value=“”；
},
onSubmitForm：（evt）=>{
如果（evt！==undefined&&evt.preventDefault）evt.preventDefault（）；
调度（loadRepos（））；
value=“”；
},
};
}
const mapStateToProps=createStructuredSelector({
repos:makeSelectRepos（），
用户名：makeSelectUsername（），
加载：makeSelectLoading（），
错误：makeSelectError（），
});

不要操纵你的

状态

，redux更喜欢纯函数方法（尤其是减缩器）。返回一个包含所有属性和新用户名的新状态对象（或者至少，这是我理解它的方式）。作为一个额外的信息，我指的是你的

状态。在Reducer中设置
语句。你可以告诉我，我正在做其他事情，我不想在这个问题上花费比我（已经一整天）更多的时间