Question

我很抱歉没有具体的问题，但我有点困惑。我开始学习redux，现在我需要在完全工作的项目中实现它：https://github.com/CodeNinja1395/Test-task-for-inCode并且有一个redux-version的分支（显然它不起作用）。我的应用程序的主要逻辑位于ContactsApp.js文件中：

class ContactsApp extends Component {
  constructor(){
    super();
    this.state = {
      searchResults: [],
      displayedUsers: [],
      displayedInfo: [],
      selectedUser: null,
      searchValue: ''
    }

  }

  componentWillMount() {
    this.props.fetchData();
  }

  handleSearch(event){
    let CONTACTS = this.props.items;
    let inputValue = event.target.value;
    this.setState({searchValue: inputValue});
    let iterate = function(obj, callback) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                    iterate(obj[property], callback);
                } else {
                    callback(obj[property]);
                }
            }
        }
    }

    let searchResults = [];

    CONTACTS.forEach(el => { //this finds all matches (except avatar)
      let arr = [];
      iterate(el, function (e) {
        if (e!=el.general.avatar)
           arr.push(e);
      });

      for (var i = 0; i < arr.length; i++) {
          if(arr[i].toLowerCase().indexOf(inputValue) !== -1){
            searchResults.push(el.foundValue = arr[i]);
          }
        }
    });

    var displayedUsers = CONTACTS.filter(el => { //this finds element by first match (except avatar)

      let arr = [];
      iterate(el, function (e) {
        if (e!=el.general.avatar)
           arr.push(e);
      });

      for (var i = 0; i < arr.length; i++) {
          if(arr[i].toLowerCase().indexOf(inputValue) !== -1){
            el.foundValue = arr[i];
            return arr[i];

          }
        }
    });

   this.setState({searchResults:  searchResults});
   this.setState({displayedUsers: displayedUsers});

  }

  handleSelectedUser(user, color){
    this.setState({selectedUser: user}, function (){
    });
  }


  render() {
    let users;

    let selectElem = this.selectElement;

    if (this.state.displayedUsers) {
      users = this.state.displayedUsers.map(user => {

        return (
          <User
            key={user.contact.phone}
            user={user}
            color={(user==this.state.selectedUser) ? 'LightSkyBlue ' : 'white'}
            selectUser={this.handleSelectedUser.bind(this)}
            searchValue={this.state.searchValue}
            searchResults={this.state.searchResults}
          />
        );
      });
    }


    return (
      <div>
        <div className="left-column">
          <div className="users">
              <SearchUser handleEvent= {this.handleSearch.bind(this)} />
              <ul className="usersList"> {users} </ul>
          </div>
        </div>
        <div className="right-column">
          <ContactDetail selectedUser={this.state.selectedUser} />
        </div>
      </div>
      );
    }
}

const mapStateToProps = state => ({
  data: state.data
});



export default connect(mapStateToProps, {fetchData})(ContactsApp);

我知道这个问题太抽象了，可能当我更好地学习redux时，它会很明显，但是因为我对此感到困惑而且不知道从哪里开始。

Answer 1

我没有完全了解您的应用正在做什么，所以我的答案也非常通用。

首先使用redux设置项目。你需要redux和react-redux软件包才能搞定它。使用redux官方网页上的教程。安装chrome redux dev工具扩展，以便能够调试和查找redux状态。

然后继续重构......

从隔离数据模型开始。可能你会有user和某种displayFilter。为它们创建减速器。

将user缩减器中的所有用户和过滤器的当前状态保留在displayFilter中。将一些模拟数据设置为默认状态。

displayFilter中的user和mapStateToProps中的displayFilter用户列表中的过滤设置。在mapStateToProps中对当前可见用户进行过滤，以便您的组件仅获得可见的用户。

然后添加一些动态内容

每次用户更改某些过滤设置时，请使用新设置调度操作并在mapStateToProps中处理，将更改应用于商店。 React-redux将自动调用您的if day % 7 == 0并将新的已过滤用户列表应用于组件并触发渲染。

进一步的步骤

这只是几个提示如何开始。如果您希望您的应用程序具有高性能和稳定性，您应该熟悉memoization概念，重新选择和immutable.js库。

一般的redux使用量

1 个答案: