React Redux 操作答案

【问题标题】：React Redux ActionsReact Redux 操作
【发布时间】：2020-02-25 12:11:00
【问题描述】：

我正在使用 redux 反应，当我声明操作时它会出错..源代码如下..

src/actions/index.js

const addTask =(task)=>{
    return {
        type:'ADD_TASK',
        payload:task
    };
},
deleteTask=(taskId)=>{
    return {
        type:'DELETE_TASK',
        payload:taskId
    };
};

export default {addTask, deleteTask};

它给出的错误是

编译失败 ./src/components/taskbar/index.js 尝试导入错误：“addTask”未从“../../actions/index”导出。

【问题讨论】：

是的，问题似乎更多地在于您如何在另一个文件中导入操作。
因为它是一个导出默认值，你需要像这样导入它：import actions from '../path' 而不是这样：import {actions} from '../path
另外，您缺少 const 的 deleteTask 声明。
...import taskAction from '../../actions/index' 那你就可以taskAction.addTask()
@Clarity 不是最好的办法，但是addTask声明后面有个逗号，所以deleteTask被赋值给一个const

标签： reactjs redux

【解决方案1】：

您可以使用 named 导出/导入：

// Named export
export const addTask =(task)=>{
    return {
        type:'ADD_TASK',
        payload:task
    };
}

// named import
import { addTask } from '../../actions/index'

或默认导出/导入：

const addTask =(task)=>{
    return {
        type:'ADD_TASK',
        payload:task
    };
}
// default export
export default { addTask }

// default import
import taskActions from '../../actions/index'
const addTask = taskActions.addTask

【讨论】：

【解决方案2】：

src/reducers/index.js 这个有问题吗？？商店是不是没有创建？？

import {combineReducers} from 'redux';

const tasksReducer =(state=[] , action)=>{
    switch(action.type){
        case 'ADD_TASK':
            state=state.concat(action.payload);
            break;
        case 'DELETE_TASK':
            state=state.slice();
            state.splice(action.payload,1);
            break;
    }
    return state;
},
reducers=combineReducers({
    tasks:tasksReducer
});

export default reducers;

【讨论】：

在每个case语句中，只返回一个新数组。例如。 “添加任务”：返回 [...state, action.payload]。在 swtich 语句的末尾添加一个默认运算符以仅返回当前状态

【解决方案3】：

你应该试试这个

export const addTask =(task)=>{
    return {
        type:'ADD_TASK',
        payload:task
    };
}

export const deleteTask=(taskId)=>{
    return {
        type:'DELETE_TASK',
        payload:taskId
    };
};

【讨论】：

Connect(Taskbar) 中的 mapStateToProps() 必须返回一个普通对象。而是收到未定义的。