Question

我正在尝试遵循redux.js.org上的redux教程。我偶然发现了这个““动作必须是简单的对象。使用自定义中间件进行异步操作”错误。这没有任何意义，因为我的操作确实是普通对象（至少我认为是这样），因此不应强迫我使用任何中间件。（我尝试使用thunk也会失败但这不是这个问题的关注

这是我的动作创作者：

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_FILTER = 'SET_FILTER'

export const VisibilityFilters = {
    SHOW_ALL: 'SHOW_ALL',
    SHOW_COMPLETED: 'SHOW_COMPLETED',
    SHOW_ACTIVE: 'SHOW_ACTIVE'
  }

export function addTodo(todoText) {
    return 
    {
        type: ADD_TODO
        todoText
    }
}

export function toggleTodo(index) {
    return
    {
        type: TOGGLE_TODO
        index
    }
}

export function setFilter(filter) {
    return 
    {
        type: SET_FILTER
        filter
    }
}

我的减速器：

import { combineReducers } from 'redux'
import { 
    ADD_TODO,
    TOGGLE_TODO,
    SET_FILTER,
    VisibilityFilters 
} from '../actions'

const { SHOW_ALL } = VisibilityFilters

function todos(state = [], action) {
    switch (action.type) {
        case ADD_TODO:
          return [
            ...state,
            {
              text: action.text,
              completed: false
            }
          ]
        case TOGGLE_TODO:
          return state.map((todo, index) => {
            if (index === action.index) {
              return Object.assign({}, todo, {
                completed: !todo.completed
              })
            }
            return todo
          })
        default:
          return state
        }
    }

function visibilityFilter(state=SHOW_ALL, action) {
    switch(action.type) {
        case SET_FILTER:
            return action.filter
        default: 
            return state
    }
}

const todoApp = combineReducers({
    visibilityFilter,
    todos
  })

export default todoApp

...最后是index.js（主要）：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';

import todoApp from './reducers';
import {
    addTodo,
    toggleTodo,
    setFilter,
    VisibilityFilters
  } from './actions';


  const store = createStore(todoApp)

  // Log the initial state
  console.log(store.getState())
  // Every time the state changes, log it
  // Note that subscribe() returns a function for unregistering the listener
  const unsubscribe = store.subscribe(() =>
    console.log(store.getState())
  )
  // Dispatch some actions
  store.dispatch(addTodo('Learn about actions'))   // This line causes the error.
  store.dispatch(addTodo('Learn about reducers'))
  store.dispatch(addTodo('Learn about store'))
  store.dispatch(toggleTodo(0))
  store.dispatch(toggleTodo(1))
  store.dispatch(setFilter(VisibilityFilters.SHOW_COMPLETED))
  // Stop listening to state updates
  unsubscribe()
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

如果您能帮我清除乌云，我将不胜感激，以便我继续我的Redux旅程。

Answer 1

您必须将返回对象刹车片放在同一行

export function addTodo(todoText) {
    return {
        type: ADD_TODO
        todoText
    }
}

无法超越“动作必须是普通对象。将自定义中间件用于异步动作。”尝试遵循redux.js.org教程时出错

1 个答案: