Магазин обновлен, но отправка не отображает новый вид

Question

Я новичок в Redux.Я начал свое путешествие вчера.Вероятно, это действительно базовый вопрос, который я не могу решить.

Я хочу обновить свой взгляд при нажатии кнопки сортировки.Когда я регистрируюсь (this.props.albums), он обновляется, но только в console.log.Вид не обновляется.

Вот функция fetchAlbums, которую я использую для размещения данных.this.props.albums - это данные, которые я использую для сортировки и обновления.Как видите, я использую console.log (this.props.albums), и он отсортирован.Но мое представление о реакции не обновляется.

class AlbumSearchContainer extends Component {
  state = {
    albumInput: '',
  };

  searchForAlbums = async event => {
    event.preventDefault();

    const albumName = this.state.albumInput;

    const api_call = await fetch(
      `https://api.spotify.com/v1/search?q=album%3A${albumName}&type=album`,
      {
        headers: { Authorization: `Bearer ${accessToken}` },
      }
    );

    const data = await api_call.json();

    this.props.fetchAlbums(data.albums.items);
    this.setState({ albumInput: '' });
  };

  handleChange = event => {
    this.setState({ albumInput: event.target.value });
  };

  render() {
    let albumsList = [];

    if (this.props.albums.length > 0) {
      albumsList = this.props.albums.map(element => (
        <AlbumComponent
          key={element.id}
          name={element.name}
          image={element.images[1].url}
          artist={element.artists[0].name}
          release_date={element.release_date}
          total_tracks={element.total_tracks}
          id={element.id}
          href={element.href}
        />
      ));
    }

    return (
      <div className="App">
        <Jumbotron style={{ backgroundColor: '#1ED760' }}>
          <h1>Search using Album Name</h1>
          <SearchingForm
            searchForAlbums={this.searchForAlbums}
            onChange={this.handleChange}
            value={this.state.albumInput}
          />

          {this.props.albums.length > 1 ? (
            <div>
              <p>
                <button
                  className="sortButton"
                  onClick={() => {
                    this.props.sortAlpha(this.props.albums);
                    console.log(this.props.albums);
                  }}
                >
                  Sort Alpha
                </button>

                <button
                  className="sortButton"
                  onClick={() => {
                    this.props.fetchAlbums(
                      this.props.albums.sort((a, b) => {
                        return (
                          new Date(b.release_date) - new Date(a.release_date)
                        );
                      })
                    );
                    console.log(this.props.albums);
                  }}
                >
                  Sort by date
                </button>
              </p>
            </div>
          ) : (
            console.log()
          )}
        </Jumbotron>
        <div className="albumContainer"> {albumsList}</div>
      </div>
    );
  }
}

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

const mapActionsToProps = dispatch => {
  return {
    fetchAlbums: albums => dispatch({ type: 'FETCH_ALBUMS', payload: albums }),
    sortAlpha: albums =>
      dispatch({ type: 'SORT_ALBUMS_ALPHA', payload: albums }),
  };
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(AlbumSearchContainer);

Я просто хочу обновить свое представление по нажатию кнопок сортировки.

// редактировать, когда я начинаю набирать в свой albumInput, оно обновляется.Но это не освежает при нажатии кнопок.

Answer 1

Я не уверен, почему ваши fetchAlbums не работают, но это должно работать:

searchForAlbums = async event => {
    event.preventDefault();

    const albumName = this.state.albumInput;

    const res = fetch(`https://api.spotify.com/v1/search?q=album%3A${albumName}&type=album`)
      .then(res => res.json())
      .then(albums => {
        this.props.fetchAlbums(albums);
        this.setState({ albumInput: '' });
      })
      .catch(error => console.log(error));
}

В вашем редукторе отсутствует состояние album:

const initialState = {
    artists: {},
    albums: []
};

Вы не обновляете свой магазин правильно, это правильный шаблон:

const albums = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_ALBUMS:
            return { ...state, albums: action.payload };
        case SORT_ALBUMS_ALPHA:
            let newAlbums = action.payload.sort((a, b) => {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
            });

            return {...state, albums: newAlbums };
        case FETCH_ARTISTS:
            return {...state, artists: action.payload);
        default:
            return state;
    }
};

Пожалуйста, проверьте эти модификации и дайте нам знать результат

Answer 2

Пара ошибок в вашей логике:

• Вы выполняете алгоритм сортировки не в том месте. Массив альбомов является частью вашего состояния. Ваше состояние передается в ваш компонент через реквизит. При изменении массива альбомов ваш компонент будет обновляться.

• Вы не отправляете действие сортировки. Основной жизненный цикл приложений-редукторов - это бесконечная цепочка действий пользователя => обновления состояний. Когда есть действие пользователя (например, щелчок по сортировке), вы должны отправить действие. А в вашем редукторе вы должны сортировать альбомы

РЕДАКТИРОВАТЬ: Что касается вашего комментария, в мире редуксов не существует такой вещи, как

Я хочу сделать это при нажатии

у лизата не в реализации. Когда пользователь нажимает, единственное, что вам нужно сделать, - это отправить действие. Как только у вас появится такое мышление, разделив действия и обновления состояний, это станет более понятным.