时间戳

首页 > 解决方案 > 在 Redux 中区分 store

reactjs - 在 Redux 中区分 store

问题描述

我正在开发一个项目，我希望将数据分开存储（尽管在单个 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分成data0and 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......

谢谢！

标签： reactjsreact-nativereduxstorereducers

解决方案

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

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

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

我有一个 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;  
  }
};

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

推荐阅读