react redux操作不调用reducer

Question

我一辈子都不能让我的一个动作叫减速机。我已经在这个应用程序中编写了多个其他动作和减法器，效果非常好。

它是筛选函数的开始。我有一个文本输入字段，在这里我不断跟踪输入字段的状态，并将字段值分配给redux操作。我有一个控制台。记录操作内部，该操作会正确记录每次按键。

我似乎不能理解的是，为什么减速器不是在每个按键调用。我已经尝试了减速器内的多个console.log，但是没有一个被键盘记录下来。

第一个控制台。当我刷新页面时，会调用reducer中的log。如果我尝试记录操作。输入，我得到：

@@redux/PROBE_UNKNOWN_ACTION1.0.i.0.0.9

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

一些代码：

过滤器组件：

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

应用组件（应该是无关的）

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>
  )
}

store（应为无关）

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

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

您应该从useDisfield创建一个调度：

常量调度=useDispatch（）；

调度（filterAnecdotes（value））；

Answer 2

尝试在const[value，setValue]=useState（“”）之后像这样实例化useDispatch

const dispatch = useDispatch();

然后使用intance来分派操作

dispatch(filterAnecdotes(value));