Question

我正在一个项目中，我希望将数据分开存储（尽管在单个redux存储中）。假设我想区分数据，以下想法是否被认为是反模式？

操作：

export const GET_DATA = 'GET_DATA';

export const getData = () => { 
  return async (dispatch) => {
    try {
      const data = await axios.get('/data');
      return onSuccess(data.data.response);
    } catch (err) {
      return onError(err);
    }

    function onSuccess(data) {
      dispatch({ type: 'GET_DATA', data });
    }
    function onError(error) {
      dispatch({ type: 'ERROR', error });
    }
  }
}

减速器：

import * as actionTypes from '../actionTypes';

const initialState = {
  data: [],
};

export default (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.GET_DATA:
      return {
        ...state,
        data: action.data
      }
    default:
      return state;  
  }
};

现在，我想将data分为data0和data1（s。动作）。我考虑过将另一个属性添加到第二个参数，该参数传递给reducer，例如转向：

function onSuccess(clients) {
  dispatch({ type: 'GET_DATA', data });
}

进入

function onSuccess(clients) {
  dispatch({ type: 'GET_DATA', data, classification: data0 });
}

这将允许我将Reducer重写为：

import * as actionTypes from '../actionTypes';

const initialState = {
  data0: [],
  data1: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.GET_DATA:
      switch (action.classification) {
        case 'data0':
          return {
              ...state,
              data: action.data
          }
        case 'data1':
          return {
            // ...
          }
    }
    default:
      return state;  
  }
};

但是我不确定这是否被视为反模式？您能否分享您的想法或推荐另一个（更好的）解决方案？作为替代方案，我目前看到编写许多动作...例如GET_DATA_DATA0，GET_DATA_DATA1 ...

谢谢！

Answer 1

我认为这是未来很难做的非常难以维护且不清楚的方法。

对于每种不同类型的数据，您都想制作一个新的简化器。在我的个人项目中，我有一个user，conversations和chat减速器。

有时候，在您开始扩展之前，具有小的功能似乎很愚蠢和毫无意义，就像是好的，什么改变了它，以及我如何准确地跟踪发生的事情。

我有一个initialState.js文件，可用于填充初始reducer状态，这有助于使数据更清楚地显示给新开发人员。

export default {
   chat: {
     id: null,
     messages: [],
   },
   conversations: [],
   user: {
      id: null,
      name: '',
   }
}

现在，每个reducer在调度一个动作时都非常清楚，发生了什么，正在更新哪些数据

所以对于chatReducer来说，它看起来像

import * as actionTypes from '../actionTypes';

import initialState from '../store/initialState.js'

export default (state = initialState.chat, action) => {
  switch (action.type) {
    case actionTypes.RECEIVED_NEW_MESSAGE:
      return { ...state, messages: [...state.message, action.newMessage]}
    case actionTypes.FETCHED_CHAT_SUCCESS:
      return action.chat
    default:
      return state;  
  }
};

我要带给您的最后一件事是考虑测试，什么更容易测试，以及测试如何使您对将来的重构充满信心。

区分Redux中的商店

1 个答案: