Redux 动作工厂不适用于参数

Posted 2023-02-22

【中文标题】Redux 动作工厂不适用于参数

【英文标题】：Redux action factory does not work with arguments

【发布时间】：2019-02-11 10:27:23

【问题描述】：

我决定创建reducer 和action factory，这样我就不再重复代码了。减速机工厂工作正常。是这样的：

const initialState = 
  loading: false,
  error: null,
  data: [],
  entity: null,
  query: null


const baseReducer = (name = '') =>   
  return (state = initialState, action) => 
    switch(action.type) 
      case `FETCH_ALL_$name_BEGIN`:
      case `FETCH_ONE_$name_BEGIN`:
        return 
          ...state,
          loading: true
        
      case `FETCH_ALL_$name_ERROR`:
      case `FETCH_ONE_$name_ERROR`:
        return 
          ...state,
          loading: false,
          error: action.payload.error
        
      case `FETCH_ALL_$name_SUCCESS`:            
        return 
          ...state,
          loading: false,
          data: action.payload.data
        
      case `FETCH_ONE_$name_SUCCESS`:
        return 
          ...state,
          loading: false,
          entity: action.payload.data
        
      default:
        return state;
    
  

不幸的是，如果我将任何参数传递给动作创建者，它们将无法工作。 这是我的实现：

import axios from 'axios';

export const actionFactory = (name, action, thunk) => () =>     
  return dispatch => 
    console.log('this one here does not work');
    dispatch(
        type: `$action_$name_BEGIN`
      
    );

    return dispatch(thunk)
      .then(response => 
        dispatch(
          type: `$action_$name_SUCCESS`,
          payload: 
            data: response.data
          
        )
      )
      .catch(error => 
        dispatch(
          type: `$action_$name_FAILURE`,
          payload: 
            error: error.message
          
        )
      );
  

这是我的两个动作。第一个工作正常，但第二个没有达到行动工厂的实施。我不知道为什么会发生这种情况，但这与传递参数有关。

export const fetchUsers = actionFactory('USERS', 'FETCH_ALL', () => 
    return axios.get('http://localhost:8000/api/user')
  );

export const fetchUser = (body) => actionFactory('USERS', 'FETCH_ONE', () => 
  return axios.get('http://localhost:8000/api/user/' + body);
)

当我在一个组件中同时调用它们时，第一个返回所有用户，第二个根本不运行。 Console.log 语句不起作用。有什么想法我能做些什么吗？我厌倦了重复代码，由于减速器工厂工作，我现在不想离开它。

【参考方案1】：

您正在对第二个 actionFactory 进行柯里化（第二个在调用时返回一个函数）。

所以对于第一个 fetchUsers() 很好。

对于第二个，您需要在传递 body 参数后调用返回的函数。那将是：

fetchUser(body)()

【讨论】：

原来如此简单。非常感谢。我实际上尝试了 fetchUser()(body)。我差一点就自己解决了。