Попытка сохранить значение в избыточном хранилище - получение отправки не является функцией

Question

Я пытаюсь сохранить значение в резервном хранилище, когда пользователь вводит текст для поиска.

Отредактировано, чтобы включить мой полный список импорта

import React, { Component } from 'react';
import axios from 'axios';
import API from './API';
import { connect } from "react-redux";
import searchSave from '../actions/search'
import {bindActionCreators} from 'redux'
const format = require('string-format')

class Search extends Component {
...

   searchForText = (text) => {
    console.log("user stopped typing");
    console.log(text);
    this.props.searchSave(text);
  }

...
}

const mapStateToProps = (state) => {
  return {
    oidc: state.oidc,
    search: state.searchtext,
  };
};

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ searchSave });
  return { ...actions, dispatch };
}


export default connect(mapStateToProps, mapDispatchToProps)(Search)

Мой редуктор выглядит следующим образом и работает в моей функции combReducers:

import Actions from '../actions/search.js'

export default (state = "", action) => {
      switch (action.type) {
        case Actions.SEARCH:
        return {searchtext: action.payload}
      }
      return state;
    };

Я получаю сообщение об ошибке «Ошибка типа: отправка не является функцией», но теоретически отправка должна быть связана с bindActionCreators?

Я искал именно эту ошибку, но, похоже, ничего из этого не связано с моими конкретными условиями.

Я предполагаю, что я делаю что-то не так в моем mapStateToProps или моем редукторе?

Я довольно новичок в редуксе и все еще нахожу это несколько запутанным.

Answer 1

Похоже, вам не хватает импорта для подключения и некоторых вещей в mapDispatchToProps.Я также не верю, что вам нужны bindActionCreators в этом сценарии:

import searchSave from '../actions/search'
//Missing import connect
import { connect } from 'react-redux'

class Search extends Component {
...

   searchForText = (text) => {
    console.log("user stopped typing");
    console.log(text);
    this.props.searchSave(text);
  }

...
}

const mapStateToProps = (state) => {
  return {
    oidc: state.oidc,
    search: state.searchtext,
  };
};

function mapDispatchToProps(dispatch) {
    searchSave: (inputs) => dispatch(searchSave(inputs)
}


export default connect(mapStateToProps, mapDispatchToProps)(Search)

Answer 2

Вам необходимо передать функцию dispatch в качестве второго параметра bindActionCreators:

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ searchSave }, dispatch);
}

Вы можете увидеть документы по этому вопросу здесь: https://react -redux.js.org / using-реагировать-редукса / connect-mapdispatch

Если вы намеревались также включить dispatch в возвращаемый реквизит (что мне кажется антипаттерном, но я не эксперт), ваш оригинальный код работает с добавлением второго параметра в bindActionCreators :

function mapDispatchToProps(dispatch) {
  const actions = bindActionCreators({ searchSave }, dispatch);
  return { ...actions, dispatch };
}