Question

我是redux的新手，并在redux中制作了待办事项列表。我的动作创建者代码如下：

    /**
 * This file is called Action Creator (creates actions)
 *
 * Actions are objects as :
 * {
 *    type : 'ADD_TODO'     //the only thing needed is type
 *    text: 'this is our first to do'
 * }
 */

module.exports = {

  addTodo: function (text) {
    return (dispatch) => {
      dispatch({type: 'ADD_TODO', data: text});
    };
  }

};

//export default actions = {
//  addTodo(text) {
//    return {
//      type: 'ADD_TODO',
//      text: text
//    }
//  }
//};
//

我没有从动作中返回对象，而是返回一个函数。所以在store.js文件中，我使用了thunkMiddleware中的react-redux。

我的store.js代码如下：

import { applyMiddleware, compose, createStore } from 'redux';
import reducer from '../reducers/reducers';
import thunkMiddleware from 'redux-thunk';

//We separated out the store from the client.js file so that if we have to add middleware here and change our state, we can do that here
//Add middlewares on actions here

let finalCreateStore = compose(
  applyMiddleware(thunkMiddleware)
)(createStore);

export default function configureStore(initialState = {todos: []}) {
  return finalCreateStore(reducer, initialState);
}

但在启动某个操作时，它表示操作未定义

[编辑]

我的减速机看起来像这样：

function getId(state) {
  return state.todos.reduce((maxId, todo) => {
      return Math.max(todo.id, maxId)
    }, -1) + 1;
}

export default function reducer(state, actions) {
  switch (actions.type) {
    case 'ADD_TODO':
      Object.assign({}, state, {
        todos: [{
          //add new to do
          text: action.text,
          completed: false,
          id: getId(state)
        }, ...state.todos]
      });
      break;

    default:
      return state;
  }
}

此外，我正在使用connect触发操作：

function mapStateToProps(state) {
  return state;
}

function mapDispatchToProps(dispatch) {
  return {
    addTodo: (todo) => {
      dispatch(addTodo(todo));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

我不知道如何摆脱这个错误。

Answer 1

您的reducer签名是(state, actions)，但在函数体中有action。你可能意味着：

function reducer (state, action) {
   // code
}

Answer 2

你的减速机有一个错字。您将action定义为第二个参数，但在一行（我在那里添加了注释），您尝试从export default function reducer(state, actions) { switch (actions.type) { case 'ADD_TODO': Object.assign({}, state, { todos: [{ //add new to do text: action.text, // <- action is not defined, but actions is completed: false, id: getId(state) }, ...state.todos] }); break; default: return state; } }读取，但未定义。

action

将它称为actions而不是CREATE TABLE IF NOT EXISTS `wp_transactions_log` ( `sync_sequence` bigint(20) unsigned NOT NULL COMMENT 'the sequence number of the sync process/operation that this transaction belong to ', `objectid` varchar(100) NOT NULL COMMENT 'the entity/record id', `wp_id` bigint(20) unsigned NOT NULL, `table_name` varchar(100) NOT NULL COMMENT 'the target wordpress table name this transaction occured/fail for some reason', `logical_table_name` varchar(100) NOT NULL, `operation` varchar(20) NOT NULL COMMENT 'inser/update/delete', `status` varchar(20) NOT NULL COMMENT 'status of the transaction: success,fail', `fail_count` int(10) unsigned NOT NULL COMMENT 'how many this transaction failed', `fail_description` text NOT NULL COMMENT 'a description of the failure', `createdon` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`sync_sequence`,`objectid`,`table_name`,`operation`,`wp_id`), KEY `objectid` (`objectid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;可能会很好，因为它只是一个动作。

在redux中触发动作时，它表示动作未定义

2 个答案: