Javascript Redux获取操作

我用react和redux创建应用程序，我需要获取数据。有没有办法重用函数getData（）和reducer。我的行为是这样的

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

和减速器

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的内容时，我都会创建新操作和新减速机。它可以使用还是有某种方法可以重用？

您可以将所有操作组合到一个函数中，如

function getData() {
  return {
    types: [GET_DATA_REQUESTED, GET_DATA_DONE, GET_DATA_FAILED],
    callApi: fetch('/')
  }
}

但是您需要连接组件并将函数作为道具传递

function mapDispatchToProps(dispatch) {
   return {
    getData: () => dispatch(getData())
   };
}

connect(null, mapDispatchToProps)(YourComponent)

现在您可以在组件中使用该函数，它将返回一个承诺。

---

查看redux的文档：

您可以将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));
        })
}

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

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

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

通过这种方式，您可以只更改url参数而调度任意多个操作，如：getData（'/user'）、getData（'/products'）

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

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

    dispatch(getDataRequested());

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

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

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

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

减速器可以是这样的：

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

    dispatch(getDataRequested());

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

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

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

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

这样，您就可以分派诸如getData（'/user'，user'）或getData（'/products'，products'）之类的操作，并具有如下状态：

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

    dispatch(getDataRequested());

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

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

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

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

---

您不需要每次都创建一个新的减速器，但必须创建新的操作。这就是redux的工作方式。你的意思是我必须在reducer中添加更多的case和每次获取的新操作（例如，请求获取数据、完成获取数据、失败获取数据、请求获取数据、完成获取数据、失败获取数据）哦，我想我误解了你的问题。我会添加一个答案，你可以检查它是否是你需要的。我不明白。redux thunk在哪里？我如何重用它？你能给我举两个不同的获取url的例子吗？当你创建你的存储时，你应该应用thunk

const-store=createStore（appReducer，composeEnhancers（applyMiddleware（thunk，apiMW））您可以将url传递给函数或为另一个请求创建另一个函数。您可以给我一些到github的链接，在那里实现getData combine操作吗？太棒了！谢谢！我还有一个问题。如果我想为用户和产品提供私有isLoading和iError，我应该怎么做？我能想到的唯一方法是使用对象来保存加载和错误数据。所以它可能像：{loading:{user:true，products:false}，isError:{user:false，products:true}。好主意。非常感谢。