「アクションはプレーンオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用してください。」に勝るものはありません。redux.js.orgチュートリアルに従おうとしたときにエラーが発生しました

ラスカル

redux.js.orgのreduxチュートリアルに従おうとしています。私はこれに出くわしました ""アクションはプレーンオブジェクトでなければなりません。非同期アクションにカスタムミドルウェアを使用する」エラー。私のアクションは確かにプレーンオブジェクトであるため(少なくとも私はそう思います)、意味がありません。したがって、ミドルウェアを使用するように強制されるべきではありません。(サンクを使用する試みも失敗しました。しかし、これはこの質問の懸念ではありません)

これが私のアクションクリエーターです:

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の旅を続けることができるように、クラウドをクリアしていただければ幸いです。

フロッピー

リターンオブジェクトブレーキを同じ行に配置する必要があります

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ