反应 redux 动作不调用减速器

Question

我一辈子都做不到我的一个动作来调用减速器。 我在这个应用程序中编写了多个其他动作和减速器，效果很好。

它是一个滤波器 function 的开头。 我有一个文本输入字段，在其中我不断跟踪输入字段 state，并将字段值发送到 redux 操作。 我在操作中有一个 console.log，可以正确记录每个按键。

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

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

@@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

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

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

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

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