redux usage at general

Question

im sorry for not-specific question, but Im confused a little bit. Im started learning redux, and now i need to implement it in Completely working project: https://github.com/CodeNinja1395/Test-task-for-inCode and there is a branch for redux-version (which is obviously isn`t working). The main logic of my app located in ContactsApp.js file:

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

I know that the question is too abstract and probably when i learn redux better it will be obvious, but for i get stucked with this and dont know where to start.

Answer 1

I don't exactly get what your app is doing so my answer will be also quite generic.

Start with setting up the project with redux. You need redux and react-redux packages to get it up. Use a tutorial from redux official page. Install chrome redux dev tools extensions to be able to debug and look-up redux state.

Then go on with refactoring...

Start with isolating your data models. Probably you'll have a user and some kind of displayFilter. Create reducers for both of them.

Keep all users in user reducer and current state of filter in displayFilter. Set some mocked data as default state.

Combine filtering settings from displayFilter and list of users from user on the fly in mapStateToProps. Do your filtering of currently visible users in mapStateToProps so your component will get only the users that are intended to be visible.

Then add some dynamic stuff

Every time a user changes some filtering settings, dispatch an action with new settings and handle it in displayFilter, apply changes to the store. React-redux will automatically call your mapStateToProps and apply new list of filtered users to the component and trigger render.

Further steps

This is just couple of hints how to start. If you want your app to be performant and stable, you should familiarize with memoization concepts, reselect and immutable.js libraries.