Question

每当我从reducer调用一个函数时，它都会被第一次调用，然后每隔两次调用一次。这是代码：

reducer.js：

System.out.println(cs1.c1 == null);

调用delete方法的组件：

import data from './data'

export const initialState = {
    notes: data,
    filter: '',
};


export const setFilter = filter => ({ type: 'setFilter', filter });
export const createNote = id => ({ type: 'createNote', id })
export const deleteNote = note => ({ type: 'deleteNote', note })

export const reducer = (state, action) => {
    switch (action.type) {
        case 'setFilter':
            return { ...state, filter: action.filter };
        case 'createNote':
            console.count('Create note fired')
            state.notes.push({
                id: action.id,
                tags: [],
                content: ""
            })
            return { ...state }

        case 'deleteNote':
            return {
                ...state,
                notes: state.notes.filter((note) => note.id !== action.note.id)
            }


        default: return state;
    }
};

任何帮助都将真正有用，请告诉我是否有文件丢失或者我以错误的方式实现了reducer，我所做的主要是遵循朋友大学教授的注释

Answer 1

制作单独的操作文件。并通过组件中的mapDispatchToProps从redux中获得该动作，您要在其中分派该动作。

const mapDispatchToProps = {
  setProfileDialog: ProfileAction.setProfileDialog,
}

Answer 2

问题是减速器必须是纯的。当 react 处于“严格模式”时，它会触发减速器两次以确保两次结果相同。改变原始状态会导致不必要的副作用。

变化：

case 'createNote':
    console.count('Create note fired')
    state.notes.push({
       id: action.id,
       tags: [],
       content: ""
       })
    return { ...state }

致：

case 'createNote':
    const notes = [
        ...state.notes,
        {
            id: action.id,
            tags: [],
            content: "",
        }
    ]
    return {...state, notes}

应该修正你的例子。

从减速器触发两次反应分派

2 个答案: