反应redux动作不调用reducer

Question

我这辈子都无法调用减速器。 我在这个应用程序中编写了多个其他动作和减速器，效果很好。

它是过滤功能的开始。我有一个文本输入字段，我在其中不断跟踪输入字段状态，并将字段值分派给 redux 操作。我在操作中有一个 console.log，可以正确记录每个按键。

我似乎无法理解的是，为什么在每次按键时都没有调用减速器。我在 reducer 中尝试了多个 console.log，但是没有一个被按键记录。

当我刷新页面时，reducer 中的第一个 console.log 被调用。 如果我尝试记录 action.type ，我会得到：

@@redux/PROBE_UNKNOWN_ACTION1.0.i.0.0.9

如果我在同一个应用程序中编写的任何其他 reducer 中尝试相同的操作，我会注销相应的类型。

一些代码：

过滤器组件：

import React, { useState } from 'react'
import { useDispatch } from 'react-redux';
import { filterAnecdotes } from '../reducers/filterReducer';

const Filter = () => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value)
  }

  useDispatch(filterAnecdotes(value));
  const style = {
    marginBottom: 10
  }

  return (
    <div style={style}>
      filter <input onChange={handleChange} />
    </div>
  )
}

export default Filter

减速器和作用： 在这里，我还没有弄清楚如何获取所有轶事的状态，以及实际返回什么。现在，我只是想让它被正确调用。

const filterReducer = (state = null, action) => {

  // These logs only get logged on refresh.
  // The action.type should be 'SEARCH', but is not.
  console.log("From filterReducer")
  console.log(action.type)

  switch(action.type) {
    case 'SEARCH':

      // This is not called at all.
      console.log(action.type, action.data)

      return action.data;
    default:
      return state
  }
}

export const filterAnecdotes = (filter) => {
  console.log(filter);
  return {
    type: 'SEARCH',
    data: filter
  }
}

export default filterReducer;

实际工作的 redux 文件示例：

const reducer = (state = [], action) => {
  console.log(state, action)
  switch(action.type){
    case 'NEW_ENTRY_NOTIFICATION':
    console.log(action.type)
      return [...state, action.data]
    case 'NEW_VOTE_NOTIFICATION':
      return [...state, action.data]
    case 'HIDE_NOTIFICATION':
      return []
    default:
      return state
  }
}

export const createNewEntryNotification = (notification) => {
  return {
    type: 'NEW_ENTRY_NOTIFICATION',
    data: notification
  }
}

export const createNewVoteNotification = (notification) => {
  return {
    type: 'NEW_VOTE_NOTIFICATION',
    data: notification
  }
}

export const hideNotification = () => {
  return {
    type: 'HIDE_NOTIFICATION'
  }
}


export default reducer

App 组件（应该是不相关的）

import React from 'react';
import NewEntry from './components/AnecdoteForm'
import AnecdoteList from './components/AnecdoteList'
import Notification from './components/Notification'
import Filter from './components/Filter';

const App = () => {

  return (
    <div>
      <h2>Anecdotes</h2>
      <Filter />
      <Notification />
      <AnecdoteList />
      <NewEntry />
    </div>
  )
}

商店（应该是无关紧要的）

import anecdoteReducer from './anecdoteReducer';
import notificationReducer from './notificationReducer';
import filterReducer from './filterReducer';
import { combineReducers } from 'redux'


const reducer = combineReducers({
  anecdotes: anecdoteReducer,
  notifications: notificationReducer,
  filters: filterReducer,
});


export default reducer

index.js（也应该是无关紧要的）

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App'
import reducer from './reducers/store'

const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)


export default App

如果需要，我很乐意提供更多信息。 这是针对来自 fullstackopen 的项目。

Answer 1

尝试在const [value, setValue] = useState("");之后像这样实例化useDispatch

const dispatch = useDispatch();

然后使用实例来调度动作

dispatch(filterAnecdotes(value));

Answer 2

useDispatch 的使用被误解了。 参考链接：https://react-redux.js.org/api/hooks#usedispatch

你应该从 useDispatch 创建一个调度：

const dispatch = useDispatch();

dispatch(filterAnecdotes(value));