Question

我正在尝试从类内部定义的函数创建redux状态。我在使用时得到Uncaught TypeError: Cannot read property 'type' of undefined：

var c = new Counter(0)
counter = c.state

let store = createStore(counter)

但是如果我使用function counter(state = 0, action)，则它可以正常工作。

import { createStore } from 'redux'

class Counter {
    constructor(s) {
        this.s = s
    }

    state(action) {
        console.log("action" + action)
        switch (action.type) {
        case 'INCREMENT':
            return this.s + 1;
        case 'DECREMENT':
            return this.s - 1;
        default:
            return this.s
        }
    }
}

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

var c = new Counter(0)
counter = c.state

let store = createStore(counter)   // not working

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

export default store

如何使用类并赋予函数以初始化状态？

Answer 1

当redux调用您的reducer时，它将传入两个参数。第一个是redux状态，第二个是当前操作。无论您使用什么参数命名，都是如此。因此，由于您的函数如下所示：

state(action) {
  console.log("action" + action)
  switch (action.type) {
  case 'INCREMENT':
      return this.s + 1;
  case 'DECREMENT':
      return this.s - 1;
  default:
      return this.s
  }
}

...然后，将redux状态分配给错误命名的变量“ action”。同时，该动作将不会分配给任何参数。初始的redux状态是不确定的，因此您会看到该异常。

相反，将函数更改为接受两个参数。状态和动作。换句话说，使用您的工作代码：

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

这不在课程内，但是我不确定为什么要这么做。

Answer 2

因此您需要传递两个参数。

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}
const store = createStore(todos, ['Use Redux'])

看看https://redux.js.org/api/createstore

如何使用类函数初始化Redux状态？

2 个答案: