时间戳

首页 > 解决方案 > 动作不触发reducer

javascript - 动作不触发reducer

问题描述

我正在尝试实现搜索，并且每次输入文本以搜索输入时，我都会执行输入操作，但减速器不会触发，我不明白为什么，最奇怪的是，另一个动作和减速器可以正常工作，但只有一个不能。

搜索组件

import React, {Component} from 'react'
import './search.css';


import axios from 'axios'
import {getPlayList,setSearchValue} from "./actions";
import {connect} from "react-redux";



class Search extends Component {
  state = {
    query: '',
    results: []
  };

  getInfo = () => {
   this.props.getPlayList(this.state.query);
   console.log(this.props.search.searchPlayList);
  };

  handleInputChange = () => {
    /*this.setState({
      query: this.search.value
    }, () => {
      if (this.state.query && this.state.query.length > 1) {
          this.getInfo();

      }

    });*/
    setSearchValue(this.search.value);
    console.log(this.props.search.searchValue);

  };

  render() {
    return (
      <form>
        <input
          placeholder="Search for..."
          ref={input => this.search = input}
          onChange={this.handleInputChange}
        />
      </form>
    )
  }
}

const mapStateToProps = store => {
  return {
    search: store.search
  };
};

export default connect(mapStateToProps, {getPlayList,setSearchValue})(Search);

行动方法：

export const getPlayList = (queryParam) => {
  return function (dispatch) {
    dispatch({type: FETCH_PLAYLIST_REQUEST});
    axios.get(`https://cors-anywhere.herokuapp.com/https://api.deezer.com/search/track?q=${queryParam}`).then(response => {
      dispatch({
        type: FETCH_PLAYLIST_SUCCESS,
        payload: {
          playlist: response.data.data,
          currentTrack: response.data.data[0]
        }
      });
    }).catch(err => {
      dispatch({
        type: FETCH_PLAYLIST_FAILURE,
        payload: err,
      });
    })
  }
};

export const setSearchValue = (value) => {
  console.log('setSearchValue',value);
  return function (dispatch) {
    dispatch({
      type: FETCH_SEARCH_VALUE,
      payload: value,
    });
  }
}

减速器

import {
  FETCH_PLAYLIST_FAILURE,
  FETCH_PLAYLIST_REQUEST,
  FETCH_PLAYLIST_SUCCESS,
  FETCH_SEARCH_VALUE
} from "../actions/types";


const initialState = {
  searchPlayList:null,
  currentTrack:null,
  searchValue:null,
  index: 0,
  isLoading: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_PLAYLIST_REQUEST:
      return {
        ...state,
        isLoading: true
      };
    case FETCH_PLAYLIST_SUCCESS:
      return {
        ...state,
        searchPlayList: action.payload.playlist,
        errors: null,
        isLoading: false,
      };
    case FETCH_PLAYLIST_FAILURE:
      return {
        ...state,
        errors: action.payload
      };
    case FETCH_SEARCH_VALUE:
      console.log('action.payload',action.payload);
      return {
        ...state,
        searchValue: action.payload
      };
    default:
      return state
  }
}

以及它是如何工作的 在此处输入图像描述

标签： javascriptreactjsecmascript-6redux

解决方案

您必须更改此行：

setSearchValue(this.search.value);

对此：

this.props.setSearchValue(this.search.value);

setSearchValuein 道具会将动作发送到商店。仅仅调用setSearchValue本身并没有做任何事情，因为它还没有连接到 redux。

推荐阅读