结合redux状态和react状态

Question

What I'm trying to do here is to make a search bar with redux state. The data structure looks like this and it's from firebase.

-LHNGtHa-PgB00-Y5R8q: {
    createdAt: 1531563127745
    imageLinks: [ 
        "https://cdn.pixabay.com/photo/2018/06/28/17/02/...",
        "https://cdn.pixabay.com/photo/2018/06/28/17/02/...",
        "https://cdn.pixabay.com/photo/2018/06/28/17/02/..."]
    tag: "asdfasdf"
    title: "asdfasdf"
}

I added currentlyDisplay: props.posts to react state, props.posts is from global redux state. So when you search, it filters out with title value

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import _ from 'lodash';
import { getPosts } from '../actions/posts';
import HouseModal from '../components/HouseModal';
import SearchField from '../components/SearchFeild';


export class Houses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: null,
      searchField: '',
      currentlyDisplay: props.posts
    }
  }

  componentDidMount() {
    this.props.getPosts();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentlyDisplay !== this.props.currentlyDisplay) {
      this.setState({ currentlyDisplay: nextProps.currentlyDisplay })
    }
  }

  componentWillMount() {
    Modal.setAppElement(document.body);
  }

  onClickHandle = (key) => {
    this.setState({
      ...this.state,
      isOpen: key
    });
  }

  onSearchChange = (event) => {
    let newlyDisplayed = _.filter(this.props.posts, post => post.title.includes(event.target.value))
    this.setState({
      searchField: event.target.value,
      currentlyDisplay: newlyDisplayed
    })
    console.log(this.state.currentlyDisplay)
  }

  currentlyDisplay() {
    return _.map(this.state.currentlyDisplay, (post, key) => {
      <div
        key={key}
        className="card"
        style={{ width: 18 + 'em' }}
        onClick={() => this.onClickHandle(key)}
      >
        <img className="card-img-top" src={post.imageLinks[0]} alt="Card cap" style={{ width: 18 + 'em' }} />
        <div className="card-body">
          <h5 className="card-title">{post.title}</h5>
          <p className="card-text">{post.tag}</p>
        </div>
        <HouseModal
          isOpen={this.state.isOpen === key}
          onClose={this.onClickHandle}
          posts={this.props.posts[key]}
        />
      </div>
    })
  }


  renderPosts() {
    return _.map(this.props.posts, (post, key) => {
      return (
        <div
          key={key}
          className="card"
          style={{ width: 18 + 'em' }}
          onClick={() => this.onClickHandle(key)}
        >
          <img className="card-img-top" src={post.imageLinks[0]} alt="Card cap" style={{ width: 18 + 'em' }} />
          <div className="card-body">
            <h5 className="card-title">{post.title}</h5>
            <p className="card-text">{post.tag}</p>
          </div>
          <HouseModal
            isOpen={this.state.isOpen === key}
            onClose={this.onClickHandle}
            posts={this.props.posts[key]}
          />
        </div>
      );
    });
  }

  render() {
    return (
      <div>
        <SearchField
          searchChange={this.onSearchChange}>
        </SearchField>
        {this.state.searchField ? this.currentlyDisplay() : this.renderPosts()}
      </div>
    )
  }
}


const mapStateToProps = (state) => {
  return {
    posts: state.post,
  }
};

export default connect(mapStateToProps, { getPosts })(Houses);

//search field

const SearchFeild =(props) => {
  return (
    <div className="search-feild__container">
        <input
          type="text"
          className="search-feild"
          onChange={props.searchChange}
          placeholder={"search.."}
        />
      </div>
  )
}

I'm getting this in console from searching but it's not rendering on the page. I'm not sure if this approach is right. I'm so confused of how to handle the global redux state with search function.

> (2) [{…}, {…}]
0: {createdAt: 1531563055532, imageLinks: Array(1), tag:
> "asdfasdf", title: "asdf"}
1: {createdAt: 1531563127745, imageLinks:
> Array(3), tag: "asdfasdf", title: "asdfasdf"}

Answer 1

It seems to me that your problem is in the fact that you aren't dispatching the action getPosts, only calling it. That means that the result of that action is not propagated to redux, and your component will not observe the changes.

Change the mapDispatchToProps object in the connect from:

export default connect(mapStateToProps, { getPosts })(Houses);

to:

const mapDispatchToProps = (dispatch) => ({
    getPosts: () => dispatch(getPosts()) 
})

export default connect(mapStateToProps, mapDispatchToProps)(Houses);

You can then call it anywhere in the component as:

const { getPosts } = this.props;
getPosts();

or

this.props.getPosts();