Question

我无法终生获得给减速器打电话的其中一项行动。我在此应用程序中编写了多个其他动作和化简，效果很好。

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

我似乎无法理解，这就是为什么每次按键都不调用reducer的原因。我在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

应用程序组件（应该无关）

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

对redux操作做出反应，不调用reducer

2 个答案: