什么是 redux-loop 以及我们如何在 React Native 中使用它

Question

什么是 redux-loop 以及在 React Native 应用程序中使用它的主要目的是什么？

Answer 1

Redux Loop 是一个库，通过将 elm 架构移植到 redux，您可以以纯粹且可测试的方式运行减速器的副作用。它的用途与 redux-thunk 和 redux-saga 类似。

这是一个示例，您可以在其中触发提取并描述如何处理成功和失败，所有这些都来自您的减速器。

//reducer.js
import { loop, Cmd } from 'redux-loop';

const initialState = {
  loading: false,
  data: null,
  error: null
}

function reducer(state = initialState, action){
  if(action.type === 'pageLoaded'){
    const newState = {...state, loading: true};
    const cmd = Cmd.run(fetchData, {
      successActionCreator: dataLoaded,
      failActionCreator: dataLoadFailed,
      args: [action.itemId]
    });
    return loop(newState, cmd);
  }
  else if(action.type === 'dataLoaded'){
    return {
      ...state,
      loading: false,
      data: action.data,
      error: null
    };
  }
  else if(action.type === 'dataLoadFailed'){
    return {
      loading: false,
      error: action.error
    };
  }
  return state;
}

export default reducer;

请注意， fetchData 从未真正从您的减速器中调用，因此它仍然是一个仅返回数据并且易于测试的纯函数。

您可以在react-native应用程序中使用redux循环，其原因与您在带有redux的常规react应用程序中使用它的原因相同，即redux本身不提供直接运行redux代码副作用的方法。相反，它允许您为 redux（即 redux-loop）编写中间件和存储增强器，从而让您自己决定如何做到这一点。

您可以在https://redux-loop.js.org/阅读更多内容

注意：我维护 redux-loop