如何从 WebStorm 中的 Action 快速导航到 Redux reducer？

Question

我必须使用 @reduxjs/toolkit

编写 Redux 应用程序

这是 todoActions.js

中的 Redux 操作

// todoActions.js

import {createAction} from "@reduxjs/toolkit";

const TodoActions = {

  /**
   * @function
   * @param {String} todo
   */
    addTodo: createAction("addTodo"),
  
  /**
   * @function
   * @param {String} todoId
   */
  removeTodo: createAction("removeTodo"),
    
};

export default TodoActions;

并且减速器停留在 todoReducer.js

import {createReducer} from "@reduxjs/toolkit";

import TodoActions from "../todoActions";

const initState = {
  todos: [],
};

const reducer = createReducer(initState, {
  [TodoActions.addTodo]: (state, action) => {
    state.todos = [state.todos, ...action.payload];
  },

  [TodoActions.removeTodo]: (state, action) => {
    state.todos = state.todos.filter(x=>x.id!==action.payload);
  },
  
});

export default reducer;

这是我在 React 组件中使用动作的方式

import React from 'react'
import {useDispatch} from 'redux-react-hook'
import TodoActions from './todoActions'

const AddRandomButton () {
  const dispatch = useDispatch()
  
  const clickHandler = event => {
    dispatch(TodoActions.addTodo("some random todos"))
  }
  
  return (
     <button onclick={clickHandler}>
       Add
     </button>
  )
  
}

问题在于：从一个动作导航到其适当的逻辑并不容易。当我在 AddButton 组件内的 addTodo() 上 CTRL+CLICK 时，IDE 将跳转到 addTodo() 的定义，这没有显示此函数的逻辑，因为逻辑在 reducer 中。

问题：有什么插件或提示可以快速转到reducer而不是IntelliJ/WebStorm中的action定义吗？

Answer 1

我是 Redux 维护者和 Redux Toolkit 的创建者。

我强烈建议您直接使用createSlice而不是createAction/createReducer。

没有理由在此处单独定义动作创建者，而您单独进行操作的事实正是导致您描述的问题的原因。

此外，在这种情况下，包装 todos 数组的对象是不必要的。

我会这样写：

import {createSlice} from "@reduxjs/toolkit";

const initialState = [];

const todosSlice = createSlice({
    name: "todos",
    initialState,
    reducers: {
        addTodo(state, action) {
            state.push(action.payload);
        },
        removeTodo(state, action) {
            return state.filter(todo => todo.id !== action.payload);
        }
    }
});

export const {addTodo, removeTodo} = todosSlice.actions;
export default todosSlice.reducer;

然后在应用级别将其整合在一起，例如：

import {combineReducers} from "@reduxjs/toolkit";
import todosReducer from "features/todosSlice";

export default combineReducers({
    todos: todosReducer,
});

这样，当您在 addTodo 上右击并 "Go to Definition" 时，它会直接跳转到同样具有 reducer 逻辑的文件。（而且，您要处理的文件会更少。）

如何从 WebStorm 中的 Action 快速导航到 Redux reducer？

How to quickly navigate to Redux reducer from an Action in WebStorm?

intellij-idea

webstorm

reactjs

redux

react-redux