javascript - Redux 获取操作

Question

我使用 React 和 Redux 创建应用程序，我需要获取数据。有什么方法可以重用函数 getData() 和 reducer。我的 Action 是这样的

importing constants

const getDataRequested = () => {
  return {
    type: GET_DATA_REQUESTED
  };
}

const getDataDone = data => {
  return {
    type: GET_DATA_DONE,
    payload: data
  };
}

const getDataFailed = () => {
  return {
    type: GET_DATA_FAILED
  };
}

export const getData = () => dispatch => {

  dispatch(getDataRequested());

  fetch('url')
    .then(response => response.json())
    .then(data => {
      dispatch(getDataDone(data));
    })
    .catch(error => {
      dispatch(getDataFailed(error));
    })
}

和 reducer

importing constants

const initialState = {
  isLoading: false,
  isError: false,
  data: [],
}
export default (state=initialState, action) => {
  switch (action.type) {
    case GET_DATA_REQUESTED:
      return { ...state, isLoading: true };
    case GET_DATA_DONE:
      return { ...state, isLoading: false, data: action.payload };
    case GET_DATA_FAILED:
      return { ...state, isLoading: false, isError: true}
    default:
      return state;
  }
};

每次我使用不同的 url 获取一些东西时，我都会创建新的 Action 和新的 reducer。可以吗？或者有什么方法可以重用它？

Answer 1

您可以将 url 参数传递给您的 thunk。所以，你可以有这样的东西:

export const getData = (url) => dispatch => {

    dispatch(getDataRequested());

    fetch(url)
        .then(response => response.json())
        .then(data => {
            dispatch(getDataDone(data));
        })
        .catch(error => {
            dispatch(getDataFailed(error));
        })
}

通过这种方式，您可以根据需要分派(dispatch)任意数量的操作，仅更改 url 参数，如下所示:getData('/user'), getData('/products')。

您还可以通过将更多参数传递给 thunk 来自定义将状态存储到 redux 中的方式。所以它可能是这样的:

const getDataDone = data => {
    return {
        type: GET_DATA_DONE,
        payload: data
    };
}

export const getData = (url, stateName) => dispatch => {
    dispatch(getDataRequested());

    fetch(url)
        .then(response => response.json())
        .then(data => {
            dispatch(getDataDone({ stateName: data }));
        })
        .catch(error => {
            dispatch(getDataFailed(error));
        })
}

reducer 可能是这样的:

const initialState = {
    isLoading: false,
    isError: false,
    data: {},
}
export default (state=initialState, action) => {
    switch (action.type) {
        case GET_DATA_REQUESTED:
            return { ...state, isLoading: true };
        case GET_DATA_DONE:
            return { ...state, isLoading: false, [action.payload.stateName]: action.payload.data };
        case GET_DATA_FAILED:
            return { ...state, isLoading: false, isError: true}
        default:
            return state;
    }
};

这样你就可以发送类似 getData('/user', 'user') 或 getData('/products', 'products') 的 Action ，并拥有这样的状态:

{
    user: {
        // your users data
    },
    products: {
        // your products data
    }
}