在 Redux 中区分 store

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. Action）。我考虑为第二个参数添加另一个属性，该属性被传递给减速器，例如转身：

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

我认为这是一种非常难以维护且不明确的方式来做任何事情。

对于您拥有的每种不同类型的数据，您都需要创建一个新的 reducer。在我的个人项目中，我有一个 user、conversations 和 chat 减速器。

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

我有一个用于填充初始 reducer 状态的 initialState.js 文件，这有助于让新开发人员更清楚数据在哪里。

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;  
  }
};

我要留给您的最后一件事是考虑测试以及更容易测试的内容以及测试如何让您对未来的重构充满信心。