React Redux 分配箭头 Function 减速器警告

Question

Can someone tell me why I'm getting this Warning in my React App?

src/reducers/posts.js Line 3:1: Assign arrow function to a variable before exporting as module default

import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../constants/actionTypes';

export default (posts = [], action) => {
    switch (action.type) {
        case FETCH_ALL:
            return action.payload;
        case UPDATE:
            return posts.map((post) => post._id === action.payload._id ? action.payload : post);
        case CREATE:
            return [ ...posts, action.payload];
        case DELETE:
            return posts.filter((post) => post._id !== action.payload);
        default:
            return posts;
    }
}

Answer 1

add variable to your function:

export default const variable = (posts = [], action) => {
    switch (action.type) {
        case FETCH_ALL:
            return action.payload;
        case UPDATE:
            return posts.map((post) => post._id === action.payload._id ? action.payload : post);
        case CREATE:
            return [ ...posts, action.payload];
        case DELETE:
            return posts.filter((post) => post._id !== action.payload);
        default:
            return posts;
    }
}

JavaScript have to know what are you exporting

Answer 2

You cannot export default and declare a variable at the same time. Try this instead:

const variable = (posts = [], action) => {
    switch (action.type) {
        case FETCH_ALL:
            return action.payload;
        case UPDATE:
            return posts.map((post) => post._id === action.payload._id ? action.payload : post);
        case CREATE:
            return [ ...posts, action.payload];
        case DELETE:
            return posts.filter((post) => post._id !== action.payload);
        default:
            return posts;
    }
}

export default variable

Or export default with the traditional named function :

export default function variable(posts = [], action) {
    switch (action.type) {
        case FETCH_ALL:
            return action.payload;
        case UPDATE:
            return posts.map((post) => post._id === action.payload._id ? action.payload : post);
        case CREATE:
            return [ ...posts, action.payload];
        case DELETE:
            return posts.filter((post) => post._id !== action.payload);
        default:
            return posts;
    }
}